兼容ie8（很实用，复制过来，仅供技术参考，更详细内容请看源地址：http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html）

<!DOCTYPE html>

<html>

  <head>

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

    <title>另一种Helper用法 - by 杨元</title>

  </head>

  <body>

    <h1>另一种Helper用法</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}}

        {{#if name}}

          {{#compare age 20}}

            <tr>

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

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

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

            </tr>

          {{else}}

            <tr>

              <td>?</td>

              <td>?</td>

              <td>?</td>

            </tr>

          {{/compare}}

        {{/if}}

      {{/each}}

    </script>

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

    <script type="text/javascript">

      $(document).ready(function() {

        //模拟的json对象

        var data = {

                    "student": [

                        {

                            "name": "张三",

                            "sex": "0",

                            "age": 23

                        },

                        {

                            "name": "李四",

                            "sex": "0",

                            "age": 18

                        },

                        {

                            "name": "妞妞",

                            "sex": "1",

                            "age": 21

                        }

                    ]

                };

        //注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架

        //$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。

        var myTemplate = Handlebars.compile($("#table-template").html());

        //注册一个比较大小的Helper,判断v1是否大于v2

        Handlebars.registerHelper("compare",function(v1,v2,options){

          if(v1>v2){

            //满足添加继续执行

            return options.fn(this);

          }else{

            //不满足条件执行{{else}}部分

            return options.inverse(this);

          }

        });

        //注册一个翻译用的Helper，0翻译成男，1翻译成女

        Handlebars.registerHelper("transformat",function(value){

          if(value==0){

            return "男";

          }else if(value==1){

            return "女";

          }

        });

        //将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。

        $('#tableList').html(myTemplate(data));

      });

    </script>

  </body>

</html>

使用jQuery+huandlebars判断类型的helper的更多相关文章

  1. jQuery如何判断元素是否是隐藏的？

    jQuery函数简介: is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true. 如果没有元素符合,或者表达式无效,都返回'false'. 注 ...

  2. SpringMVC上传文件以流方式判断类型附常用类型

    // 此类中判断类型所截取的byte 长度暂不确定,请使用者测试过使用 package com.tg.common.other; import com.tg.common.tginterface.TG ...

  3. jquery中判断是否按下回车enter键

    <script>   function sendsubmit()   {   $("#userLoginForm").submit();   return false; ...

  4. Java的equals方法，首先要判断类型是否相同

    如下代码,Long 和Integer 进行比较: Integer aa = 1; Long bb= 1L; System.out.println(aa.equals(bb)); 输出为:false 查 ...

  5. obj.getClass() == Person.class 用于判断类型

    obj.getClass() == Person.class  用于判断类型

  6. js判断类型的方法

    //判断类型 var arr=[]; Object.prototype.toString.call(arr)=='[object Array]' //判断是否是包含关系 function elCont ...

  7. jquery中判断选择器，找没找到元素用$().size()==0

    jquery中判断选择器,找没找到元素用$().size()==0

  8. laravel where筛选会判断类型吗？

    laravel where筛选会判断类型吗? laravel where筛选会判断类型吗? laravel where筛选会判断类型吗? 这个说会判断不对,说不会判断也不对. 当字符串'1'和数值1是 ...

  9. python继承，判断类型，多态

    1.python中继承 如果已经定义了Person类,需要定义新的Student和Teacher类时,可以直接从Person类继承: class Person(object): def __init_ ...

随机推荐

  1. 关于http协议的一些笔记

    1.正向代理和反向代理正向代理相当于客户端向代理发送服务器,代理将请求发给服务器,一般代理跟客户端有关系,没有查找的功能:反向代理作用于服务端,客户端向服务器代理发送请求,服务器代理去找需要的资源,然 ...

  2. WEB学习笔记1-综述

    WEB前端基本技术:HTML.CSS.JavaScript 概念: 从职责上讲,Web前端开发要涉及网站开发的方方面面,从前端UI到和后端的数据交互都属于前端开发的范畴.Web前端开发是兼具艺术气息和 ...

  3. 实验楼 MySQL 基础课程 挑战：搭建一个简易的成绩管理系统的数据库

    传送门:https://www.shiyanlou.com/courses/running 介绍 现需要构建一个简易的成绩管理系统的数据库,来记录几门课程的学生成绩.数据库中有三张表分别用于记录学生信 ...

  4. 选择器（ID选择器）

    ID选择器: 为HTML标签添加ID属性: <p id="p1">内容1</p> <p id="p2">内容2</p& ...

  5. 初识vue小结

    初识vue 大家都那么热爱他一定有原因,我也特想了解. 我来咯, 首先用vue开发版,用一个标签在head中插入,script标签src属性引入vue文件,就像jquey一样在script,但是放在h ...

  6. （27）session（设置值、取值、修改、删除）

    session的由来 Cookie虽然在一定程度上解决了“保持状态”的需求,但是由于Cookie本身最大支持4096字节,以及Cookie本身保存在客户端,可能被拦截或窃取,因此就需要有一种新的东西, ...

  7. 在linux系统下运行jar包的命令如下

    1.java -jar xxxxx.jar  // 当前ssh窗口被锁定,可按CTRL + C打断程序运行,或直接关闭窗口,程序退出 2.java -jar xxxxx.jar &   //当 ...

  8. django无法同步mysql数据库 Error:1064

    [问题] 具体问题:新建django工程,使用django的manage.py的 migrate命令进行更改. 在初始化数据库表时,失败,错误信息为 django.db.migrations.exce ...

  9. 安装Kerberos后，如何不使用它，Current Kerberos password:

    在不知情的情况下,安装了kerberos,然后只有是有密码的地方,一直有这个: Current Kerberos password: 没有了解过kerberos,想要卸载,卸载了还是有,怎么弄都弄不掉 ...

  10. mongo数据的导入（mongoimport）和导出（mongoexport）

    1.导出数据可以使用命令: mongoexport -h dbhost -d dbname -c collectionName -o output 参数说明: -h 数据库地址 -d 指明使用的库 - ...