首页 > 代码库 > 【JS】JsRender模板插件的使用
【JS】JsRender模板插件的使用
新公司项目,同事推荐了我JsRender 模板插件,用了感觉挺好用的,至少比拼接字符串方便的多,而且支持绑定和函数判断,以及一些其他的高级用法,我用到的有,数据绑定,if else 判断,和方法绑定等。废话不多说,开始介绍。(并非jsRender学习,只是个人项目总结)
先看一段代码:
<script type="text/x-jsrender" id="letterSendUserInfoTemplate"> <img class="header" src="http://www.mamicode.com/{{:headPhotos}}" onerror="javascript:"http://blog.51cto.com/viewpic.php?refimg=" + this.src=http://www.mamicode.com/‘‘" /> <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=http://www.mamicode.com/[{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
本文出自 “Pz的技术实训基地” 博客,请务必保留此出处http://panzi.blog.51cto.com/4738203/1603983
【JS】JsRender模板插件的使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。