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


先看一段代码：

<scripttype="text/x-jsrender"id="letterSendUserInfoTemplate"><imgclass="header"src="{{:headPhotos}}"onerror="javascript:this.src=''"/><divclass="info_warp"><divclass="info_inner"><spanclass="username">{{:name}}</span><spanclass="userinfo">{{:title1String}}</span><spanclass="userinfo">{{:title2String}}</span></div><pclass="micro_text">{{:microMotto}}</p></div></script>

没错，以上就是模板了，{{}}里的就是要绑定的Model数据。首页，页面上引用jsrender.js不多说，如果绑定上述模板的的话，方法如下：

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

其实很简单，如果是ajax请求的话，只要把返回的数据项绑定到相应的html上，然后用模板的render方法得到相应的html，赋值给相应的div或者其他元素，就OK了，省去了自己拼写html并且难维护的麻烦。


使用功能一：for循环

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

使用功能二：ifelse根据不同的条件判断给元素赋值不同的class

class="{{ifplaceMent==0}}other`else`self{{/if}}{{ifisRead}}`else`notRead{{/if}}clearfix"

使用功能三：用js方法，将时间转换为固定格式，注意ShortTimeFormatter方法必须放在$.views.helpers里面

$.views.helpers({TimeFormatter:function(time){vart=time.split('T');varresult=t[0].substr(0,10)+''+t[1].substr(0,5);returnresult;},ShortTimeFormatter:function(time){vart=time.split('T');varresult=t[0].substr(2,8)+''+t[1].substr(0,5);returnresult;},LastTimeFormatter:function(time){return$.getDateDiff(time);}});

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

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