兼容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>由于if功力不足引出的Helper - by 杨元</title>

  </head>

  <body>

    <h1>由于if功力不足引出的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>{{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

                        },

                        {

                            "sex": "0",

                            "age": 22

                        },

                        {

                            "name": "妞妞",

                            "sex": "1",

                            "age": 18

                        }

                    ]

                };

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

          }

        });

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

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

      });

    </script>

  </body>

</html>

很多时候，我们需要更加复杂的if判断逻辑，显然默认的if不能满足我们的需求。

本例中，利用Handlebars.js中Helper强大的扩展性，定义了一个compare，它用来比较两个数的大小，如果第一个数大于第二个数，满足条件继续执行，否则执行{{else}}部分。

Handlebars.registerHelper用来定义Helper，它有两个参数，第一个参数是Helper名称，第二个参数是一个回调函数，用来执行核心业务逻辑。本例中的函数，有三个参数，其中前两个参数是需要比较的两个数，第三个参数是固定的，就叫options，如果加了该参数，就说明这个Helper是一个Block，块级别的Helper，有一定的语法结构，调用的时候加#号，就像if那样。

关于options的使用，小菜所了解的就是这种用法，return options.fn(this);表示满足条件继续执行，也就是执行{{#compare }}和{{else}}之间的代码；return options.inverse(this);表示不满足条件，也就是执行{{else}}和{{/compare}}之间的代码。

由于这是一个块级别的Helper，所以调用要加#，例如：{{#compare age 20}}，其中的age就是当前上下文中读取到的年龄，20是小菜随便写的值，意思是只要age比20大，就显示，否则全显示?。

读者可以看出，Helper中写的可以是任何js代码，现在想想，就知道Handlebars有多灵活了吧！！

使用jQuery+huandlebars遍历if判断不足引用helper的更多相关文章

  1. 使用jQuery+huandlebars遍历中if判断

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

  2. 使用jQuery+huandlebars遍历数组嵌套数组

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

  3. 使用jQuery+huandlebars遍历数组

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

  4. 使用jQuery+huandlebars遍历展示对象中的数组

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

  5. C#开发Unity游戏教程循环遍历做出判断及Unity游戏示例

    C#开发Unity游戏教程循环遍历做出判断及Unity游戏示例 Unity中循环遍历每个数据,并做出判断 很多时候,游戏在玩家做出判断以后,游戏程序会遍历玩家身上大量的所需数据,然后做出判断,即首先判 ...

  6. jquery学习——遍历

    1.each() $(selector).each(function(index,element)) var arr = [ "a", "bb", " ...

  7. struts2：遍历自定义字符串数组，遍历Action实例所引用对象中的数组

    在struts2:OGNL表达式,遍历List.Map集合:投影的使用一文中已经讲述了OGNL遍历List.Map集合等功能. 本文简单写一个遍历数组的示范程序. 1. 遍历自定义字符串数组 < ...

  8. jquery $.each遍历json数组方法

    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/ ...

  9. Jquery节点遍历

    jquery 节点遍历 <html> <head> <title></title> <script src="Jquery/jquery ...

随机推荐

  1. SQL注入之Sqli-labs系列第三十三关（基于宽字符逃逸注入）

    开始挑战第三十三关(Bypass addslashes) 0x1查看源码 本关和第三十二关其实是一样的,只是这里用到了addslashes()函数 function check_addslashes( ...

  2. 网络编程并发 多进程 进程池,互斥锁,信号量,IO模型

    进程:程序正在执行的过程,就是一个正在执行的任务,而负责执行任务的就是cpu 操作系统:操作系统就是一个协调.管理和控制计算机硬件资源和软件资源的控制程序. 操作系统的作用: 1:隐藏丑陋复杂的硬件接 ...

  3. Windows 命令行解析工具（getopt）

    忘记了上次在哪里找到这个功能库,只有一个 .h 和 .c 文件,再次搜索的时候发现找不到了,结果只能在之前的代码中,两个文件提出使用,顾将这两个文件备份在这里. /* Getopt for Micro ...

  4. SignalTap导致PCIe Read/Write卡死

    /********************************************************************** * SignalTap导致PCIe Read/Write ...

  5. 【leetcode】427. Construct Quad Tree

    problem 427. Construct Quad Tree 参考 1. Leetcode_427. Construct Quad Tree; 完

  6. SP四种作用范围pageContext、request、session、application 一看就懂

      作用域规定的是变量的有效期限: 1.如果把变量放到pageContext里,就说明它的作用域是page,它的有效范围只在当前jsp页面里. 从把变量放到pageContext开始,到jsp页面结束 ...

  7. PythonStudy——字符编码 Character Encoding

    测试一下学习字符编码的问题:解决乱码问题 数据 从 硬盘 => 内存 => cpu应用程序打开文本文件的三步骤1.打开应用程序2.将数据加载到内存中3.cpu将内存中的数据直接翻译成字符显 ...

  8. oracle-logminer

    LogMiner工具实际上是由两个新的PL/SQL内建包((DBMS_LOGMNR 和 DBMS_ LOGMNR_D)和四个V$动态性能视图(视图是在利用过程DBMS_LOGMNR.START_LOG ...

  9. Illegalmixofcollations (utf8_unicode_ci,IMPLICIT) and (utf8_general_ci,IMPLICIT)foroperation '= 连表查询排序规则问题

    两张 表 关联 ,如果 join的字段 排序规则 不一样就会出这个问题 . 解决办法 ,统一 排序规则. 在说说区别,utf8mb4_general_ci 更加快,但是在遇到某些特殊语言或者字符集,排 ...

  10. maven 项目使用本地jar

    <dependency> <groupId>com.yeepay.g3</groupId> <artifactId>yop</artifactId ...