返回目录

 <!DOCTYPE html>

 <html>

   <head>

     <META http-equiv=Content-Type content="text/html; charset=utf-8">

     <title>each-基本循环使用方法 - by 杨元</title>

   </head>

   <body>

     <h1>each-基本循环使用方法</h1>

     <!--基础html框架-->

     <table>

       <thead>

         <tr>

           <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 student}}

         <tr>

           <td>{{name}}</td>

           <td>{{sex}}</td>

           <td>{{age}}</td>

         </tr>

       {{/each}}

     </script>

     <!--进行数据处理、html构造-->

     <script type="text/javascript">

       $(document).ready(function() {

         //模拟的json对象

         var data = {

                     "student": [

                         {

                             "name": "张三",

                             "sex": "0",

                             "age": 18

                         },

                         {

                             "name": "李四",

                             "sex": "0",

                             "age": 22

                         },

                         {

                             "name": "妞妞",

                             "sex": "1",

                             "age": 18

                         }

                     ]

                 };

         //注册一个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>

通过阅读本例，读者已经掌握Handlebars.js一个重要特性：循环。#each可以理解成循环命令，循环的是json对象中的student属性。对于每次循环，都可以读出里边的name、sex、age属性。

js模版引擎handlebars.js实用教程——each-基本循环使用方法的更多相关文章

  1. js模版引擎handlebars.js实用教程

    js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...

  2. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  3. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

  4. js模版引擎handlebars.js实用教程——each-循环中使用this

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  5. js模版引擎handlebars.js实用教程——each嵌套

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  6. js模版引擎handlebars.js实用教程——循环中使用索引

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  7. js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  8. js模版引擎handlebars.js实用教程——with-终极this应用

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  9. js模版引擎handlebars.js实用教程——if-判断的基本用法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

随机推荐

  1. VS2010--canot determine the locationof the vs common tools folder

    在vcvars32.bat第一行后复制 @SET VSINSTALLDIR=c:\Program Files\Microsoft Visual Studio 10.0 @SET VCINSTALLDI ...

  2. Get&Post简单说明

    一.GET请求和POST请求简单说明 创建GET请求 1 // 1.设置请求路径 2 NSString *urlStr=[NSString stringWithFormat:@"http:/ ...

  3. XAMARIN +VS2015 ANDROID 开发判断gps 是否打开。

    在获取位置的时候首先要判断gps是否打开,如果没有打开就要提示打开,当然最友好的就是直接调转到打开界面. LocationManager alm = (LocationManager)this.Get ...

  4. 【转】MySQL的各种timeout

    因为最近遇到一些超时的问题,正好就把所有的timeout参数都理一遍,首先数据库里查一下看有哪些超时: root@localhost : test 12:55:50> show global v ...

  5. ros下多机器人系统(1)

    multi-robot system 经过两个多月的ros学习,对ros的认识有了比较深入的了解,本篇博客主要记录在ros下开发多机器人系统以及对ros更深入的开发.本篇博客是假定读者已经学习完了全部 ...

  6. android开发中在界面上实现曲线图的几个开源项目

    转自:https://wapiknow.baidu.com/question/1959128379041474620?qq-pf-to=pcqq.c2c 几个相关开源项目: 1.  MPAndroid ...

  7. Java：switch语句例子

    1.输入一个名次,第1-4名,分别称为冠军.亚军.季军.殿军,5名及5名以上,称为其他名次. import java.util.Scanner; public class switch1 { publ ...

  8. python基础整理笔记（七）

    一. python的类属性与实例属性的注意点 class TestAtt(): aaa = 10 def main(): # case 1 obj1 = TestAtt() obj2 = TestAt ...

  9. hdu 3397 Sequence operation（线段树：区间更新）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3397 题意:给你一个长度为n的0,1序列,支持下列五种操作, 操作0(0 a b):将a到b这个区间的 ...

  10. C#数据结构杂记

    定义任何类时记得要定义无参构造函数,否则在反序列化的时候会抛出异常. [Serialize]声明该类可以被序列化 Const与readonly的区别 const本质上是常量没有任何方法修改值,read ...