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

时间:2022-12-28 08:28:38

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步完成,显示出效果。