新公司項(xiàng)目，同事推薦了我JsRender 模板插件，用了感覺(jué)挺好用的，至少比拼接字符串方便的多，而且支持綁定和函數(shù)判斷，以及一些其他的高級(jí)用法，我用到的有，數(shù)據(jù)綁定，if else 判斷，和方法綁定等。廢話不多說(shuō)，開(kāi)始介紹。（并非jsRender學(xué)習(xí)，只是個(gè)人項(xiàng)目總結(jié)）

創(chuàng)新互聯(lián)公司是一家專業(yè)提供大觀企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為大觀眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

先看一段代碼：

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

沒(méi)錯(cuò)，以上就是模板了，{{}}里的就是要綁定的Model數(shù)據(jù)。首頁(yè)，頁(yè)面上引用jsrender.js不多說(shuō)，如果綁定上述模板的的話，方法如下：

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

其實(shí)很簡(jiǎn)單，如果是ajax請(qǐng)求的話，只要把返回的數(shù)據(jù)項(xiàng)綁定到相應(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方法，將時(shí)間轉(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);
    }
});

<div class="release_time">
                    {{>~ShortTimeFormatter(addTime)}}
                </div>

好啦，項(xiàng)目中目前就用到這么幾個(gè)簡(jiǎn)單的方法，不過(guò)jsrender應(yīng)該會(huì)更強(qiáng)大一些，只不過(guò)我沒(méi)有用到，對(duì)此感興趣的可以上網(wǎng)艘一下吧，沒(méi)錯(cuò)， JsRender

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

當(dāng)前名稱：【JS】JsRender模板插件的使用-創(chuàng)新互聯(lián)
分享鏈接：http://www.rwnh.cn/article28/ccihcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、建站公司、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、軟件開(kāi)發(fā)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)