JS中art-template模板使用過(guò)濾器問(wèn)題
art-template模板使用過(guò)濾器
html有個(gè)特點(diǎn):某些小數(shù)會(huì)變成無(wú)限小數(shù)。
比如1.05,可能顯示為1.049999999999……
在javascript中可以使用.toFixed(value);等方法,進(jìn)行四舍五入處理,保留固定的小數(shù)位數(shù)。
但是,art-template模板進(jìn)行渲染就不支持在模板中直接使用方法。
這時(shí)就需要用到art-template模板的過(guò)濾器。
語(yǔ)法:
?? ?<!--HTML--> ?? ?<script type="text/html" id="template"> ?? ??? ?{{date|過(guò)濾器名稱}} ?? ?</script>
?? ?template.defaults.imports.過(guò)濾器名稱 = function(date){ ?? ? ? ?處理內(nèi)容 ?? ? ? ?return 處理結(jié)果 ?? ?};
舉個(gè)栗子
?? ?<div class="box"></div> ?? ?<script type="text/html" id="template"> ?? ??? ?<div class="total-price"> ?? ??? ??? ?{{list.unit-price*list.num|format}} 元 ?? ??? ?</div> ?? ?</script>
?? ?render(data){ ?? ??? ?// art-template過(guò)濾器 ?? ??? ?template.defaults.imports.format = function(n){ ?? ??? ??? ?return n.toFixed(2); ?? ??? ?}; ?? ??? ?// art-template模板渲染 ?? ??? ?$(".box").html(template('template',{list:data})); ?? ?}
效果圖
原本:
使用過(guò)濾器:
需要注意的是過(guò)濾器必須有一個(gè)返回值。
并且過(guò)濾器還有其他寫(xiě)法。
art-template過(guò)濾器(單值,多值)
art-template過(guò)濾器
過(guò)濾器處理一個(gè)值
HTML:<p>共有{{popWindow_val.freeFriend | friendNum}}位好友</p>
JS: template.defaults.imports.friendNum = function (value) { ? ? var length = value.length; ? ? return length;? }
過(guò)濾器處理兩個(gè)值
HTML:{{$imports.pkWord(pkList_val.freeTeam,pkList_val.zan)}}
JS:template.defaults.imports.pkWord = function (value,zan) { ? ? ? ? for (var i = 0, len = value.length; i < len; i++) { ? ? ? ? ? ? if (value[i].status == 2 || value[i].status == 3) { ? ? ? ? ? ? ? ? return "小組中已有人集齊點(diǎn)贊,趕緊分享好友,完成時(shí)間最短即可免單。"; ? ? ? ? ? ? } ? ? ? ? } ?? ? ? ? ? var word = 'PK已發(fā)起,請(qǐng)?jiān)?4小時(shí)內(nèi)集齊' + zan + '個(gè)贊,小組內(nèi)完成集贊耗時(shí)最短者即可免單。' ? ? ? ? return word; }
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用JS實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了使用JS實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03用javascript實(shí)現(xiàn)鼠標(biāo)框選
用javascript實(shí)現(xiàn)鼠標(biāo)框選...2007-05-05純js代碼實(shí)現(xiàn)未知寬高的元素在指定元素中垂直水平居中顯示
本章節(jié)介紹一下如何實(shí)現(xiàn)未知寬高的元素在指定元素下實(shí)現(xiàn)垂直水平居中效果,代碼簡(jiǎn)單易懂,需要的朋友可以參考下本文2015-09-09簡(jiǎn)單對(duì)比分析JavaScript中的apply,call與this的使用
簡(jiǎn)單的說(shuō)call,apply都屬于Function.prototype的一個(gè)方法,它是JavaScript引擎內(nèi)在實(shí)現(xiàn)的,因?yàn)閷儆贔unction.prototype,所以每個(gè)Function對(duì)象實(shí)例(就是每個(gè)方法)都有call,apply屬性。既然作為方法的屬性,那它們的使用就當(dāng)然是針對(duì)方法的了,這兩個(gè)方法是容易混淆的2015-12-12JS右下角廣告窗口代碼(可收縮、展開(kāi)及關(guān)閉)
這篇文章主要介紹了JS右下角廣告窗口代碼,具有浮動(dòng)顯示、可收縮、展開(kāi)及關(guān)閉等功能,涉及javascript針對(duì)頁(yè)面元素屬性操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09JS簡(jiǎn)單限制textarea內(nèi)輸入字符數(shù)量的方法
這篇文章主要介紹了JS簡(jiǎn)單限制textarea內(nèi)輸入字符數(shù)量的方法,涉及JavaScript響應(yīng)鼠標(biāo)及鍵盤(pán)事件處理textarea輸入框字符的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10通過(guò)百度地圖獲取公交線路的站點(diǎn)坐標(biāo)的js代碼
通過(guò)百度地圖獲取公交線路的站點(diǎn)坐標(biāo)的js代碼,需要的朋友可以參考下2012-05-05帶有定位當(dāng)前位置的百度地圖前端web api實(shí)例代碼
這篇文章主要介紹了帶有定位當(dāng)前位置的百度地圖前端web api實(shí)例代碼 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06微信小程序?qū)崿F(xiàn)事件傳參與數(shù)據(jù)同步流程詳解
這篇文章主要介紹了微信小程序開(kāi)發(fā)中實(shí)現(xiàn)事件傳參與數(shù)據(jù)同步的詳細(xì)流程,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-10-10