阿坝州网站建设公司

【JS】JsRender模板插件的使用-创新互联

新公司项目，同事推荐了我JsRender 模板插件，用了感觉挺好用的，至少比拼接字符串方便的多，而且支持绑定和函数判断，以及一些其他的高级用法，我用到的有，数据绑定，if else 判断，和方法绑定等。废话不多说，开始介绍。（并非jsRender学习，只是个人项目总结）

创新互联公司是一家专业提供大观企业网站建设,专注与成都网站制作、成都网站建设、H5技术、小程序制作等业务。10年已为大观众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

先看一段代码：


    
    

        
            {{:name}}
            {{:title1String}}
            {{:title2String}}
        
                     {{:microMotto}}         

    

没错，以上就是模板了，{{}}里的就是要绑定的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);
    }
});

                    {{>~ShortTimeFormatter(addTime)}}
                

好啦，项目中目前就用到这么几个简单的方法，不过jsrender应该会更强大一些，只不过我没有用到，对此感兴趣的可以上网艘一下吧，没错， JsRender

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


分享名称：【JS】JsRender模板插件的使用-创新互联
分享链接：http://azwzsj.com/article/ccihcp.html

其他资讯