【JS】JsRender模板插件的使用

  新公司項目,同事推薦了我JsRender 模板插件,用了感受挺好用的,至少比拼接字符串方便的多,並且支持綁定和函數判斷,以及一些其餘的高級用法,我用到的有,數據綁定,if else 判斷,和方法綁定等。廢話很少說,開始介紹。(並不是jsRender學習,只是我的項目總結)javascript


先看一段代碼:html

<script type="text/x-jsrender" id="letterSendUserInfoTemplate">
    <img class="header" src="{{:headPhotos}}" onerror="javascript:this.src=''" />
    <div class="info_warp">

        <div class="info_inner">
            <span class="username">{{:name}}</span>
            <span class="userinfo">{{:title1String}}</span>
            <span class="userinfo">{{:title2String}}</span>
        </div>
        <p class="micro_text">
            {{:microMotto}}
        </p>
    </div>
</script>

沒錯,以上就是模板了,{{}}裏的就是要綁定的Model數據。首頁,頁面上引用jsrender.js很少說,若是綁定上述模板的的話,方法以下:java

 var tabhtml = $("#letterSendUserInfoTemplate").render(data);
                letter.options.leftlettertabcontainer.html(tabhtml);
  var data=[{headPhotos:'',name:'',title1String:'',title2String:'',microMotto:''},
  {headPhotos:'',name:'',title1String:'',title2String:'',microMotto:''}];

其實很簡單,若是是ajax請求的話,只要把返回的數據項綁定到相應的html上,而後用模板的render方法獲得相應的html,賦值給相應的div或者其餘元素,就OK了, 省去了本身拼寫html而且難維護的麻煩。ajax


使用功能一: for循環ide

 {{for #data}}html代碼{{/for}}

使用功能二:if else 根據不一樣的條件判斷給元素賦值不一樣的class
函數

class="{{if placeMent==0}}other `else`self{{/if}} {{if isRead}}`else`notRead{{/if}} clearfix"

使用功能三:用js方法,將時間轉換爲固定格式,注意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);
    }
});
<div class="release_time">
                    {{>~ShortTimeFormatter(addTime)}}
                </div>

好啦,項目中目前就用到這麼幾個簡單的方法,不過jsrender應該會更強大一些,只不過我沒有用到,對此感興趣的能夠上網艘一下吧,沒錯,  JsRender
this

相關文章
相關標籤/搜索