新公司项目，同事推荐了我JsRender 模板插件，用了感觉挺好用的，至少比拼接字符串方便的多，而且支持绑定和函数判断，以及一些其他的高级用法，我用到的有，数据绑定，if else 判断，和方法绑定等。废话不多说，开始介绍。（并非jsRender学习，只是个人项目总结）
先看一段代码：
计算
安全
数据库
网络和加速
企业服务
<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
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
