返回目录

  1.  <!DOCTYPE html>
  2.  <html>
  3.    <head>
  4.      <META http-equiv=Content-Type content="text/html; charset=utf-8">
  5.      <title>另一种Helper用法 - by 杨元</title>
  6.    </head>
  7.    <body>
  8.      <h1>另一种Helper用法</h1>
  9.      <!--基础html框架-->
  10.      <table>
  11.        <thead>
  12.          <tr>
  13.            <th>姓名</th>
  14.            <th>性别</th>
  15.            <th>年龄</th>
  16.          </tr>
  17.        </thead>
  18.        <tbody id="tableList">
  19.  
  20.        </tbody>
  21.      </table>
  22.  
  23.      <!--插件引用-->
  24.      <script type="text/javascript" src="script/jquery.js"></script>
  25.      <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
  26.  
  27.      <!--Handlebars.js模版-->
  28.      <!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
  29.      <!--id可以用来唯一确定一个模版,type是模版固定的写法-->
  30.      <script id="table-template" type="text/x-handlebars-template">
  31.        {{#each student}}
  32.          {{#if name}}
  33.            {{#compare age 20}}
  34.              <tr>
  35.                <td>{{name}}</td>
  36.                <td>{{transformat sex}}</td>
  37.                <td>{{age}}</td>
  38.              </tr>
  39.            {{else}}
  40.              <tr>
  41.                <td>?</td>
  42.                <td>?</td>
  43.                <td>?</td>
  44.              </tr>
  45.            {{/compare}}
  46.          {{/if}}
  47.        {{/each}}
  48.      </script>
  49.  
  50.      <!--进行数据处理、html构造-->
  51.      <script type="text/javascript">
  52.        $(document).ready(function() {
  53.          //模拟的json对象
  54.          var data = {
  55.                      "student": [
  56.                          {
  57.                              "name": "张三",
  58.                              "sex": "0",
  59.                              "age": 23
  60.                          },
  61.                          {
  62.                              "name": "李四",
  63.                              "sex": "0",
  64.                              "age": 18
  65.                          },
  66.                          {
  67.                              "name": "妞妞",
  68.                              "sex": "1",
  69.                              "age": 21
  70.                          }
  71.                      ]
  72.                  };
  73.  
  74.          //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
  75.          //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
  76.          var myTemplate = Handlebars.compile($("#table-template").html());
  77.  
  78.          //注册一个比较大小的Helper,判断v1是否大于v2
  79.          Handlebars.registerHelper("compare",function(v1,v2,options){
  80.            if(v1>v2){
  81.              //满足添加继续执行
  82.              return options.fn(this);
  83.            }else{
  84.              //不满足条件执行{{else}}部分
  85.              return options.inverse(this);
  86.            }
  87.          });
  88.  
  89.          //注册一个翻译用的Helper，0翻译成男，1翻译成女
  90.          Handlebars.registerHelper("transformat",function(value){
  91.            if(value==0){
  92.              return "男";
  93.            }else if(value==1){
  94.              return "女";
  95.            }
  96.          });
  97.  
  98.          //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
  99.          $('#tableList').html(myTemplate(data));
  100.        });
  101.      </script>
  102.    </body>
  103.  </html>

小菜刚刚提到过，带options参数的Helper是块级别的，而不带的，相当于行内级别的Helper。

从例子一开始，性别就是用0、1代码表示的，但实际情况下我们需要转换成汉字，transformat这个Helper需要一个参数，根据不同的代码，返回男女，这样调用{{transformat sex}}，其中sex是从当前上下文中读取的性别代码。

js模版引擎handlebars.js实用教程——另一种Helper用法的更多相关文章

  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-基本循环使用方法

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. WinForm应用只运行一次

    一.WinForm应用只能运行一次 static class Program { /// <summary> /// 应用程序的主入口点. /// </summary> [ST ...

  2. ASP.NET MVC分页组件MvcPager 2.0版发布暨网站全新改版

    MvcPager分页控件是在ASP.NET MVC Web应用程序中实现分页功能的一系列扩展方法,该分页控件的最初的实现方法借鉴了网上流行的部分源代码, 尤其是ScottGu的PagedList< ...

  3. 利用chrome的profiler查找js的memory leak

    1. 首先要固定一个测试环境.具体来说,选择某一个可以重复的操作,作为标准的测试动作. 2. 刷新浏览器后用profiler抓下heap snapshot. 3. 进行操作,再一次抓下snapshot ...

  4. Spring IOC 注入方式

    依赖注入通常有如下两种方式: ①设值注入:IOC容器使用属性的Setter方法来注入被依赖的实例. 设值注入是指IOC容器使用属性的Setter方法来注入被依赖的实例.这种注入方式简单.直观,因而在S ...

  5. ubuntu 终端设置（颜色与长路径）

    Linux给人最大的享受就是可以根据个人喜好去定制令自己舒服的系统配置,像终端颜色的设置就是一个典型的例子. 图1 系统默认状态下的终端显示     在没有经过自定义配置的终端下工作久了,难免容易疲劳 ...

  6. Height Half Values

    public class HeightDemo { /** * 题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半: * 再落下,求它在第10次落地时,共经过多少米?第10次反弹多高? * ...

  7. String、StringBuffer、StringBuilder的一些小经验……

    一说String.StringBuffer和StringBuilder,想必大家都很熟悉,这三者经常在我们的面试题中出现,我也是看到了关于这三个的经典面试题,才触动了我之前工作中的一些经历,故而根据我 ...

  8. .net配置文件读取

    public static string LogPath { get { return AppSettingValue(); } } public static string AppSettingVa ...

  9. Python垃圾回收机制

    引用计数Python默认的垃圾收集机制是“引用计数”,每个对象维护了一个ob_ref字段.它的优点是机制简单,当新的引用指向该对象时,引用计数 引用计数 Python默认的垃圾收集机制是“引用计数”, ...

  10. (转)CentOs上配置samba服务

    前 言 在我们使用 Windows 作为客户机的时候,通常有文件.打印共享的需求.作为Windows 网络功能之一,通常可以在 Windows 客户机之间通过 Windows Network 固有的功 ...