返回目录

 <!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有多灵活了吧！！

js模版引擎handlebars.js实用教程——由于if功力不足引出的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. SqlBulkCopy 从bcp客户端收到一个对 colid 1 无效的列长度。

    出现这个错误,大家都知道是因为字段长度超出了,但是这里需要注意的是,colid 1指的是数据库表的第1列,而不是C#中DataTable的第1列. 比如C#中DataTable的列顺序为{" ...

  2. Vue组件之自定义表单组件

    今天又看了一遍vue的文档,记得之前学习的时候,官方文档中有提过,v-model指令是一个语法糖,做两件事,一个是给表单控件元素绑定value,第二个是当输入时更新绑定的值,不过后来在"表单 ...

  3. Zip压缩和解压缩

    这个功能完全依靠一个第三方的类,ICSharpCode.SharpZipLib.dll,只是在网上搜了大半天,都没有关于这个类的详细解释,搜索的demo也是各种错误,感觉作者完全没有跑过,就那么贸贸然 ...

  4. IntegerCache类

    先看代码实例现象: 问题:为什么都是比较数值,第一个为true,第二个确为false呢? 查找源码(java.lang.Integer),看到如下代码: /** * Cache to support ...

  5. hdu 1181（DFS)变 形 课

    变形课 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)Total Submis ...

  6. 启动maven项目发现没有tomcat

    手动配置tomcat插件 1.在项目打开之前,选择configure--->plugins 2.搜索"tomcat",勾选,ok 3.再选择configure--->s ...

  7. Block循环引用问题研究

    自从苹果在objc中添加Block功能支持以后已经过了很久.目前网上对于Block的使用有很多介绍.不过对于Block的内存管理问题,则是众说纷纭.再加上objc开始使用ARC以后,对于Block的内 ...

  8. 启动tomcat时遇到的问题

    1.当启动Tomcat时,出现了如下信息: The APR based Apache Tomcat Native library which allows optimal performance in ...

  9. 用Python写爬虫爬取58同城二手交易数据

    爬了14W数据,存入Mongodb,用Charts库展示统计结果,这里展示一个示意 模块1 获取分类url列表 from bs4 import BeautifulSoup import request ...

  10. lockfree

    为什么要lockfree 按我的理解, lockfree就是不去 调用操作系统给定的锁机制. 1. 会有system call,  and system call is expensive; 比如pt ...