前端模板引擎(jQuery模板)jsrender入门
杜良骏
1、模板用处
预先定义一些固定格式的HTML标签，勿需依赖DOM和JQuery
2、使用流程
引入JS
定义模板
准备显示JSON数据对象
获取模板，将模板与数据相结合
利用Html输出
3、简单的例子
基本变量需要使用冒号 “:” 作为标识，一般是简单对象的某个属性。比如传入一个简单对象data
//定义模板
<script type="text/x-jsrender" id="j-specCard">
<table>
<tr>
<td>Name: {{:name}}</td>
<td>Age: {{:age}}</td>
</tr>
</table>
</script>
//逻辑
(function(jq, g) {
//传入一个简单对象
var data = {
'name': 'alice',
'age': 18
},
//获取模板
jsRenderTpl = $.templates('#j-specCard'),
//模板与数据结合
finalTpl = jsRenderTpl(data);
$('.box').html(finalTpl);
})(jQuery, window);
4、传入一个多层级对象complexData
<body>
<div class="box"></div>
<script type="text/x-jsrender" id="j-specCard">
<table>
<tr>
<td>Name: {{:personalInfo.name}}</td>
<td>Age: {{:personalInfo.age}}</td>
</tr>
</table>
<p>{{:top.middle1}}</p>
<p>{{:top.middle.bottom}}</p>
</script>
</body>
<script src="../lib/jquery-1.11.2.min.js"></script>
<script src="../lib/jsrender.js"></script>
<script>
(function(jq, g) {
var complexData = {
'personalInfo': {
'name': 'alice',
'age': 18
},
'top': {
'middle': {
'bottom': 'this is bottom value'
},
'middle1': 'this is middle1 value'
}
},
//获取模板
jsRenderTpl = $.templates('#j-specCard'),
//末班与数据结合
finalTpl = jsRenderTpl(complexData);
$('.box').html(finalTpl);
})(jQuery, window)
</script>
如上所见，不管传入的对象有多复杂，都能按照层级去到属性，只是把最外层的对象名省略掉了。
类似资料：