1、什么是jsrender
一个JavaScript库,允许您定义一次样板结构并重复使用它来动态生成HTML。JsRender为HTML5开发带来了一个新的模板库,它具有无代码标记语法和高性能,不依赖于jQuery,也不依赖于文档对象模型(DOM),支持创建自定义函数并使用纯粹的基于字符串的渲染。
更详细的学习资料可参考专栏:https://msdn.microsoft.com/en-au/magazine/hh882454.aspx
官网地址:http://www.jsviews.com/#home
2、基本语法
- 原始赋值: {{:属性名}},显示原始数据
- 转码赋值: {{>属性名}},显示HTML编码后的数据,让数据原样输出
- 控制语句可嵌套使用:
- 判断: {{if 表达式}} … {{else}} … {{/if}}
- 循环: {{for 数组}} … {{/for}}
- 其它进阶
- 模板嵌套,使用:{{for tmpl="#另一个模板" /}}
- 转换器 $.views.converters()定义,使用:{{func:属性名}}
- 帮助方法 $.views.helpers()定义,使用:{{if ~func(arg1, arg2, ...)}}
- 自定义标签 $.views.tags()
2.1 基本变量标签 {{:属性名}}
基本变量需要使用冒号 ":" 作为标识,一般是简单对象的某个属性。比如传入一个简单对象data,先看官网的说明(谷歌翻译后的中文说明)
例子:
//在html页面中添加模板
<script type="text/x-jsrender" id="table">
<table>
<tr>
<td>Name: {{:user_name}}</td>
<td>Age: {{:user_id}}</td>
</tr>
</table>
</script>
<script>
//逻辑
$(function() {
//传入一个简单对象
var data = { 'user_name': 'henry', 'user_id': 30 },
//获取模板
var tmpl = $.templates("#table"); // Get compiled template
//模板与数据结合
var html = tmpl.render(eval(data)); // Render template using
});
</script>
<script src="${base}/statics/js/operation_v1.1/lib/jsrender.min.js"></script>
2.2 基本变量标签 {{>属性名}}
{{:}} 和 {{>}}(或{{html:}})两者都可以输出内容,不过后者是经过html编码的。
2.3 逻辑判断和循环。
<1> if-else
语法:{{if condition}} ... {else condition} ... {{else}}... {{/if}}
扫描二维码关注公众号,回复:
3839166 查看本文章
例子:
<td>
{{if result== "true"}}
<a><span >right</span></a>
{{else}}
<a><span >wrong</span></a>
{{/if}}
</td>
<2> for
语法: {{for}} ... {{/for}}
例子:
<script type="text/tmp" id="tmp5">
{{for}}
<li>id:{{:ID}} name:{{:Name}}</li>
{{/for}}
</script>
var arr = [
{ ID: 1, Name: "tom" },
{ ID: 2, Name: "jack" },
{ ID: 3, Name: "lucy"}
];
var html = $("#tmp5").render(arr);
$("#list").html(html);
<3> 嵌套for
语法:语法:{{for}}...{{for 当前上下文}} ... {{/for}} ... {{/for}}
例子:
<script type="text/tmp" id="tmp7">
{{for}}
<li>
name:{{:name}}
<ul>
{{for hobbies}}
<li>{{:#getIndex() + 1}}:{{:#data}}</li>
{{/for}}
</ul>
</li>
{{/for}}
</script>
arr = [
{ name: "tom", hobbies: ["篮球", "足球"] },
{ name: "jack", hobbies: ["篮球", "橄榄球"] },
{ name: "lucy", hobbies: ["游泳", "羽毛球"] }
];
var html = $("#tmp7").render(arr);
$("#list").html(html);