js模版引擎handlebars.js实用教程——with-终极this应用
2013-12-12 16:04
609 查看
返回目录
本例和上例不同之处在于favorite属性中不再是map项,而是普通字符串,因此对于每个项,可以直接用{{this}}读取,this代表当前字符串。
所以说,this非常灵活,读者一定要大胆发挥想象力。
<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <title>with-终极this应用 - by 杨元</title> </head> <body> <h1>with-终极this应用</h1> <!--基础html框架--> <table> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>兴趣爱好</th> </tr> </thead> <tbody id="tableList"> </tbody> </table> <!--插件引用--> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script> <!--Handlebars.js模版--> <!--Handlebars.js模版放在script标签中,保留了html原有层次结构,模版中要写一些操作语句--> <!--id可以用来唯一确定一个模版,type是模版固定的写法--> <script id="table-template" type="text/x-handlebars-template"> {{#each this}} <tr> <td>{{name}}</td> <td>{{sex}}</td> <td>{{age}}</td> <td> {{#with favorite}} {{#each this}} <p>{{this}}</p> {{/each}} {{/with}} </td> </tr> {{/each}} </script> <!--进行数据处理、html构造--> <script type="text/javascript"> $(document).ready(function() { //模拟的json对象 var data = [ { "name": "张三", "sex": "0", "age": 18, "favorite": [ "唱歌", "篮球" ] }, { "name": "李四", "sex": "0", "age": 22, "favorite": [ "上网", "足球" ] }, { "name": "妞妞", "sex": "1", "age": 18, "favorite": [ "电影", "旅游" ] } ]; //注册一个Handlebars模版,通过id找到某一个模版,获取模版的html框架 //$("#table-template").html()是jquery的语法,不懂的童鞋请恶补。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //将json对象用刚刚注册的Handlebars模版封装,得到最终的html,插入到基础table中。 $('#tableList').html(myTemplate(data)); }); </script> </body> </html>
本例和上例不同之处在于favorite属性中不再是map项,而是普通字符串,因此对于每个项,可以直接用{{this}}读取,this代表当前字符串。
所以说,this非常灵活,读者一定要大胆发挥想象力。
相关文章推荐
- js模版引擎handlebars.js实用教程——each-循环中使用this
- js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)
- js模版引擎handlebars.js实用教程——each嵌套
- js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper
- Js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——关于HTML编码
- js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
- js模版引擎handlebars.js实用教程——结束语
- js模版引擎handlebars.js实用教程——如何引入Handlebars.js
- js模版引擎handlebars.js实用教程——if-判断的基本用法
- js模版引擎handlebars.js实用教程——each-基本循环使用方法
- js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程——目录
- js模版引擎handlebars.js实用教程
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
- js模版引擎handlebars.js实用教程——循环中使用索引
- js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper