新公司項目,同事推薦了我JsRender 模板插件,用了感覺挺好用的,至少比拼接字符串方便的多,而且支持綁定和函數(shù)判斷,以及一些其他的高級用法,我用到的有,數(shù)據(jù)綁定,if else 判斷,和方法綁定等。廢話不多說,開始介紹。(并非jsRender學(xué)習(xí),只是個人項目總結(jié))
創(chuàng)新互聯(lián)建站專注于陽城網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供陽城營銷型網(wǎng)站建設(shè),陽城網(wǎng)站制作、陽城網(wǎng)頁設(shè)計、陽城網(wǎng)站官網(wǎng)定制、微信小程序定制開發(fā)服務(wù),打造陽城網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供陽城網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
先看一段代碼:
沒錯,以上就是模板了,{{}}里的就是要綁定的Model數(shù)據(jù)。首頁,頁面上引用jsrender.js不多說,如果綁定上述模板的的話,方法如下:
var tabhtml = $("#letterSendUserInfoTemplate").render(data); letter.options.leftlettertabcontainer.html(tabhtml); var data=[{headPhotos:'',name:'',title1String:'',title2String:'',microMotto:''}, {headPhotos:'',name:'',title1String:'',title2String:'',microMotto:''}];
其實很簡單,如果是ajax請求的話,只要把返回的數(shù)據(jù)項綁定到相應(yīng)的html上,然后用模板的render方法得到相應(yīng)的html,賦值給相應(yīng)的div或者其他元素,就OK了, 省去了自己拼寫html并且難維護(hù)的麻煩。
使用功能一: for循環(huán)
{{for #data}}html代碼{{/for}}
使用功能二:if else 根據(jù)不同的條件判斷給元素賦值不同的class
class="{{if placeMent==0}}other `else`self{{/if}} {{if isRead}}`else`notRead{{/if}} clearfix"
使用功能三:用js方法,將時間轉(zhuǎn)換為固定格式,注意ShortTimeFormatter方法必須放在$.views.helpers里面
$.views.helpers({ TimeFormatter: function (time) { var t = time.split('T'); var result = t[0].substr(0, 10) + ' ' + t[1].substr(0, 5); return result; }, ShortTimeFormatter: function (time) { var t = time.split('T'); var result = t[0].substr(2, 8) + ' ' + t[1].substr(0, 5); return result; }, LastTimeFormatter: function (time) { return $.getDateDiff(time); } });
{{>~ShortTimeFormatter(addTime)}}
好啦,項目中目前就用到這么幾個簡單的方法,不過jsrender應(yīng)該會更強(qiáng)大一些,只不過我沒有用到,對此感興趣的可以上網(wǎng)艘一下吧,沒錯, JsRender