云平台项目--学习经验--jsrender前端渲染模板

jsrender的好处：可以预先自定义一些固定的html标签，在需要显示数据的时候，可以直接传入真实的数据并显示在web页面中，避免了Js编写中的复杂过程；针对高性能和纯字符串渲染并优化，不需要依赖DOM和jQuery;
jsrender使用顺序：
1.引入相关js.。
2.自定义好模板。
3.准备好需要显示的json对象。
4.编译为元素。
5.通过js的append、html等方法显示。

以一个简单的翻页按钮为例：
第1步加载完毕后。
第2步，准备好模板：
//渲染模板
<script id="discuss_pager_item_templ" type="text/x-jsrender">
　　<li class="{{:value == 'now' ? 'active' : ''}}"><a data-page="{{:value}}">{{:text}}</a></li>
</script>
//目标模板
<div id="discuss_list_pager" style="padding-bottom: 0">
　　<ul class="pagination"></ul>
</div>
第3步，在js中编写需要显示的json对象：
if(i == currentPage){
　　pages.push({
　　　　text:i,
　　　　value:'now'
　　　　});
} else {
　　pages.push({
　　　　text:i,
　　　　value:i
　　　　});
}
currentPage代表当前页面，i指当前页面的数值。
当value传递值为now时，则class="active"，会有选中的css效果，否则无效果。
第4步，编译为元素：
$("#discuss_list_pager .pagination").html(
　　$.templates("#discuss_list_item_templ").render(pages));
第5步完成，显示出效果。

巴特西

云平台项目--学习经验--jsrender前端渲染模板

最新文章

热门文章