扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
新公司项目,同事推荐了我JsRender 模板插件,用了感觉挺好用的,至少比拼接字符串方便的多,而且支持绑定和函数判断,以及一些其他的高级用法,我用到的有,数据绑定,if else 判断,和方法绑定等。废话不多说,开始介绍。(并非jsRender学习,只是个人项目总结)
创新互联公司是一家专业提供大观企业网站建设,专注与成都网站制作、成都网站建设、H5技术、小程序制作等业务。10年已为大观众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。先看一段代码:
没错,以上就是模板了,{{}}里的就是要绑定的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许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流