Handlebars模板引擎之高阶
Helpers
其实在Handlebars模板引擎之进阶我想说if else
的功能的,可是由于这个功能在我的开发中我觉的鸡肋没啥用,就直接不用了。
因为if else
只能进行简单判断,如果条件参数返回 false, undefined, null, "" 或 [](非真的值)时,Handlebars 将不渲染。
类似这样
{{#each this}}
{{#if this.show}}
{{/if}}
{{/each}}
并不能进行二元的运算,类似这样
{{#each this}}
{{#if this.show == 'showtime' }}
{{/if}}
{{/each}}
所以用的不多,如果有类似上面的二元的话,需要借助Helpers来操作。
具体来看下用Handlebars是什么东西。
var myTemplate = Handlebars.compile($("#table-template").html());
Handlebars.registerHelper("addOne", function(index, options) {
return parseInt(index, 10) + 1;
});
$('#table tbody').html(myTemplate(data));
注册Helper后,使用
<td>{{ addOne @index }}</td>
这里我就以上文中,表格序号为引。
表格需要以0开头应该是很怪,所以我们需要以1开头。如果只是简单的js的话,直接index+1
就完事了。但是我们这是模板引擎,我们需要按照她的规则来。
这里我们就通过Handlebars.registerHelper()
注册了一个Helper(上帝之手)。
然后传递一个helper的名称,一个回调函数,函数中的参数,就是我们注入进去的@index
索引值。
效果:
更进一部的官方例子:
<div class="post">
<h1>By {{fullName author}}</h1>
<div class="body">{{body}}</div>
<h1>Comments</h1>
{{#each comments}}
<h2>By {{fullName author}}</h2>
<div class="body">{{body}}</div>
{{/each}}
</div>
模板
var context = {
author: {firstName: "Alan", lastName: "Johnson"},
body: "I Love Handlebars",
comments: [{
author: {firstName: "Yehuda", lastName: "Katz"},
body: "Me too!"
}]
};
Handlebars.registerHelper('fullName', function(person) {
return person.firstName + " " + person.lastName;
});
结果:
<div class="post">
<h1>By Alan Johnson</h1>
<div class="body">I Love Handlebars</div>
<h1>Comments</h1>
<h2>By Yehuda Katz</h2>
<div class="body">Me Too!</div>
</div>
Handlebars模板引擎之高阶的更多相关文章
- Handlebars模板引擎中的each嵌套及源码浅读
若显示效果不佳,可移步到愚安的小窝 Handlebars模板引擎作为时下最流行的模板引擎之一,已然在开发中为我们提供了无数便利.作为一款无语义的模板引擎,Handlebars只提供极少的helper函 ...
- handlebars模板引擎使用初探1
谈到handlebars,我们不禁产生疑问,为什么要使用这样的一个工具呢?它究竟能为我们带来什么样的好处?如何使用它呢? 一.handlebars可以干什么? 首先,我们来看一个案例: 有这样的htm ...
- Handlebars 模板引擎之前后端用法
前言 不知不觉间,居然已经这么久没有写博客了,坚持还真是世界上最难的事情啊. 不过我最近也没闲着,辞工换工.恋爱失恋.深圳北京都经历了一番,这有起有落的生活实在是太刺激了,就如拿着两把菜刀剁洋葱一样, ...
- express-9 Handlebars模板引擎(2)
视图和布局 视图通常表现为网站上的各个页面(它也可以表现为页面中AJAX局部加载的内容,或一封电子邮件,或页面上的任何东西).默认情况下,Express会在views子目录中查找视图.布局是一种特殊的 ...
- express-8 Handlebars模板引擎(1)
简介 使用JavaScript生成一些HTML document.write('<h1>Please Don\'t Do This</h1>'); document.write ...
- Handlebars模板引擎之上手
handlebars Handlebars,一个JavaScript模板引擎,是基于Mustache的扩展.模板引擎的都存在一个上下文环境,这是它的作用区间. 需求:基本使用 需要的库 <scr ...
- Handlebars模板引擎之进阶
取得索引 我想取得索引作为序号这个是常用的.在handlebars也是存在的. 就是使用 @index 来获取索引 {{#each this}} <tr> <td>{{ @in ...
- 【转】在Express项目中使用Handlebars模板引擎
原文:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/ 最近在用Expressjs做一个项目,前后端都用它来完成.自己之 ...
- 【转链接】Handlebars模板引擎以及浅谈模板引擎的实现原理
什么叫做“模板引擎“?我是这么理解的:就是对一些待填入数据的占位符的解析.如果你使用过Python的django框架,那你肯定是模板一点也不陌生.模板引擎就是解析模板的,把后端数据塞到前端页面模板. ...
随机推荐
- C#简单画图Draw研究学习
命名空间:using System.Drawing; Graphics类:有道词典翻译 在C#里是封装一个 GDI+ 绘图图面,此类不能被继承. Pen类:定义用于绘制直线和曲线的对象. 此类不能被继 ...
- Enrolment API
由于Moodle 2.0有一个用户注册的新概念,它们完全独立于角色和功能.能力通常与注册状态结合使用. 什么是注册? 登记的用户可以完全参加一门课程.活跃用户注册允许用户输入课程.只有注册的用户可能是 ...
- symmfony
安装:http://symfony.cn/docs/book/installation.html 1先检查php版本是否符合你要下载的symfony的最低版本: php -version 系统安装完成 ...
- 一道有意思的多线程面试题 C# 代码实现
如果你对多线程的控制不怎么了解,那么理解了这篇文章的内容也许对你有帮助.鼓励先自己动手实现一遍,做不出来在看代码. 题目一:两个线程交替打印0~100的奇偶数 这道题就是说有两个线程,一个名为偶数线程 ...
- Orleans高级功能
一.Reentrant Grains二.请求上下文三.激活垃圾收集四.外部任务和Grains五.序列化六.代码生成七.在Silo内的应用程序引导八.拦截器九.取消令牌十.Powershell客户端十一 ...
- 用redis来实现Session保存的一个简单Demo
现在很多项目都用Redis(RedisSessionStateProvider)来保存Session数据,但是最近遇到一个比较典型的情况,需要把用户数据全部load到redis里面,在加上RedisS ...
- C# DataGridView插入DB
public static bool ContrastColumns(DataColumnCollection co1, DataGridViewColumnCollection co2) { boo ...
- Javascript实现对象的继承
在Java和C#中,你可以简单的理解class是一个模子,对象就是被这个模子压出来的一批一批月饼.压个啥样,就得是个啥样,不能随便动,动一动就坏了.而在Javascript中,没有模子,月饼被换成了面 ...
- jQueryPrint 的简单使用
jQueryPrint 的简单使用 一.为什么要使用 jQueryPrint? 1.当然是方便的要死尼,相比于其他的方法. 2.打印整个页面或者局部页面都是非常的可以的,使用很方便. 3.如果要导出 ...
- 非常简单的方法实现ViewPager自动循环轮播
非常简单的方法实现ViewPager自动循环轮播,见红色代码部分,其它的代码可以忽略不看. 简洁高效是我解决问题的首要出发点. package com.shuivy.happylendandreadb ...