09-with-终极this应用
来源:互联网 发布:apache php环境搭建 编辑:程序博客网 时间:2024/05/17 11:05
<!DOCTYPE html> 2 <html> 3 <head> 4 <META http-equiv=Content-Type content="text/html; charset=utf-8"> 5 <title>with-终极this应用 - by 杨元</title> 6 </head> 7 <body> 8 <h1>with-终极this应用</h1> 9 <!--基础html框架-->10 <table>11 <thead>12 <tr>13 <th>姓名</th>14 <th>性别</th>15 <th>年龄</th>16 <th>兴趣爱好</th>17 </tr>18 </thead>19 <tbody id="tableList">20 21 </tbody>22 </table>23 24 <!--插件引用-->25 <script type="text/javascript" src="script/jquery.js"></script>26 <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>27 28 <!--Handlebars.js模版-->29 <!--Handlebars.js模版放在script标签中,保留了html原有层次结构,模版中要写一些操作语句-->30 <!--id可以用来唯一确定一个模版,type是模版固定的写法-->31 <script id="table-template" type="text/x-handlebars-template">32 {{#each this}}33 <tr>34 <td>{{name}}</td>35 <td>{{sex}}</td>36 <td>{{age}}</td>37 <td>38 {{#with favorite}}39 {{#each this}}40 <p>{{this}}</p>41 {{/each}}42 {{/with}}43 </td>44 </tr> 45 {{/each}}46 </script>47 48 <!--进行数据处理、html构造-->49 <script type="text/javascript">50 $(document).ready(function() {51 //模拟的json对象52 var data = [53 {54 "name": "张三",55 "sex": "0",56 "age": 18,57 "favorite":58 [59 "唱歌",60 "篮球"61 ]62 },63 {64 "name": "李四",65 "sex": "0",66 "age": 22,67 "favorite":68 [69 "上网",70 "足球"71 ]72 },73 {74 "name": "妞妞",75 "sex": "1",76 "age": 18,77 "favorite":78 [79 "电影",80 "旅游"81 ]82 }83 ];84 85 //注册一个Handlebars模版,通过id找到某一个模版,获取模版的html框架86 //$("#table-template").html()是jquery的语法,不懂的童鞋请恶补。。。87 var myTemplate = Handlebars.compile($("#table-template").html());88 89 //将json对象用刚刚注册的Handlebars模版封装,得到最终的html,插入到基础table中。90 $('#tableList').html(myTemplate(data));91 });92 </script>93 </body>94 </html>
本例和上例不同之处在于favorite属性中不再是map项,而是普通字符串,因此对于每个项,可以直接用{{this}}读取,this代表当前字符串。
所以说,this非常灵活,读者一定要大胆发挥想象力。
作者:杨元
欢迎任何形式的转载,但请务必注明出处。
0 0
- 09-with-终极this应用
- handlebars-----with的this终极应用
- this with
- YUM应用终极攻略
- $(this). 应用
- this应用
- this关键字、this关键字应用
- this指向及this应用
- 应用生命周期终极 DevOps 工具包
- JavaScript中with/this用法
- 使用with提前获取this
- this is incompatible with DISTINCT
- 19.this的应用
- this的应用
- this 关键字的应用
- 补充:this的应用
- this关键字的应用
- this关键字应用
- 总结将代码托管到GitHub上
- 【html】link,script
- atom编辑器快捷键
- SCNetworkReachability简单说明
- Host 'XXX' is not allowed to connect to this MySQL server 解决方案/如何开启MySQL的远程帐号
- 09-with-终极this应用
- Laravel5.3 注册监听器--实时打印SQL语句
- springboot 获取项目绝对路径
- GRPC学习笔记
- 输入框测试要点
- java实现在线支付
- Sklearn-LogisticRegression逻辑回归
- codeforces round390 div2 C Fedor and coupons
- 以小故事的形式讲述Java回调机制,非常有助于理解。