【JS】JsRender模板插件的使用-創新互聯

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

創新互聯公司是一家專業提供大觀企業網站建設,專注與成都網站制作、成都網站建設、H5技術、小程序制作等業務。10年已為大觀眾多企業、政府機構等服務。創新互聯專業的建站公司優惠進行中。

先看一段代碼：

<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不多說，如果綁定上述模板的的話，方法如下：

 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并且難維護的麻煩。

使用功能一： for循環

 {{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

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前名稱：【JS】JsRender模板插件的使用-創新互聯
分享鏈接：http://m.kartarina.com/article28/ccihcp.html

成都網站建設公司_創新互聯，為您提供服務器托管、建站公司、手機網站建設、網站設計公司、軟件開發、網站排名

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容