引入js

<script src="js/json3.min.js"></script>
<script src="js/handlebars-v4.0.12.js"></script>

设置模板

<script id="css1" type="text/x-handlebars-template">
<style type="text/css">
.gridtable {
font-family: verdana, arial, sans-serif;
font-size: 13px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
} .gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</script>

调用

//返回模板编译后的结果
function getHtml(id,d) {
var o = d || {};
var h = Handlebars.compile($('#' + id).html());
return h(o);
}

循环

{{#each list}}
<tr>
<td>{{rownum}}</td>
<td>{{cwardname}}</td>
<td>{{nums}}</td>
<td>{{cxyrs}}</td>
<td>&nbsp;</td>
<td>{{gxy35}}</td>
<td>{{gxy35}}</td>
</tr>
{{/each}}

判断

Handlebars.registerHelper("compare", function (v1, options) {
if (v1) {
return options.fn(this); // 满足添加继续执行
} else {
return options.inverse(this); // 不满足条件执行{{else}}部分
}
});

使用 上面的判断

{{#compare obj2.name1}}
<input type="checkbox"/>无&emsp;<input type="checkbox"/>有&emsp;原因:<br/>
1.<br/>
2.<br/>
{{else}}
&nbsp;
{{/compare}}

注册使用helper ,下面是循环里  索引加一的helper

Handlebars.registerHelper("addOne", function (index, options) {
return parseInt(index) + 1;
}); {{#each list}}
<tr>
<td>{{addOne @index}}</td>
<td>{{itemname}}</td>
<td>{{qty}}</td>
<td>{{p2}}</td>
<td>{{itemunit}}</td>
</tr>
{{/each}}

取值

正常取值 {{name}},
不转义 {{{html}}}

Handlebars 使用的更多相关文章

  1. Handlebars 模板引擎之前后端用法

    前言 不知不觉间,居然已经这么久没有写博客了,坚持还真是世界上最难的事情啊. 不过我最近也没闲着,辞工换工.恋爱失恋.深圳北京都经历了一番,这有起有落的生活实在是太刺激了,就如拿着两把菜刀剁洋葱一样, ...

  2. handlebars自定义helper的写法

    handlebars相对来讲算一个轻量级.高性能的模板引擎,因其简单.直观.不污染HTML的特性,我个人特别喜欢.另一方面,handlebars作为一个logicless的模板,不支持特别复杂的表达式 ...

  3. handlebars.js的运用与整理

    最近在做部门的技术分享网站,主要是一些文章的列表和演讲信息展示,内容比较规律,复用性较高.同事推荐了 handlebars.js.用来看看. handlebars.js是一种静态JS模板,用起来还蛮简 ...

  4. Express 4 handlebars 不使用layout写法

    Express 4 handlebars 不使用layout写法 Express node nodejs handlebars layout 最近刚开始学习使用nodejs. 使用express搭建了 ...

  5. Handlebars.js的学习

    写在开头的话: 在使用Ghost搭建自己的博客的时候,发现不会Handlebars.js寸步难行,所以本人决定学习下Handlebars.js,因此在此做个记录 为什么选择Handlebars.js ...

  6. js模版引擎handlebars.js实用教程——目录

    写在开头的话: 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的一些问题. 实际上,小菜写这篇文 ...

  7. Handlebars块级Helpers

    1.Handlebars简单介绍: Handlebars是JavaScript一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less templat ...

  8. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  9. handlebars.js 用 <br>替换掉 内容的换行符

    handlebars.js 用 <br>替换掉 内容的换行符 JS: Handlebars.registerHelper('breaklines', function(text) { te ...

  10. 【前端】制作一个handlebars的jQuery插件

    (function($) { var compiled = {}; $.fn.handlebars = function($srcNode, data) { // 取出模版内容 var src = $ ...

随机推荐

  1. Beta冲刺贡献分数分配结果

    小组名称:Hello World! 项目名称:空天猎 组长:陈建宇 成员:刘成志.刘耀泽.刘淑霞.黄泽宇.方铭.贾男男 第三周贡献分分配结果 基础分 会议分 个人贡献分 最终分数 黄泽宇 9 0.5 ...

  2. 20172305 2018-2019-1 《Java软件结构与数据结构》第六周学习总结

    20172305 2018-2019-1 <Java软件结构与数据结构>第六周学习总结 教材学习内容总结 本周内容主要为书第十章内容: 树(一种非线性结构,其中的元素被组织成一个层次结构) ...

  3. Markdown的基本语法

    Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不 ...

  4. WPF/MVVM快速指引

    简介 最近微软推出了UWA,又是一波新的C#+xaml学习热.好多小伙伴都对MVVM感觉很好奇,但是有些地方也有点难以理解.特意写了这边文章,希望对你有帮助. 这边文章会很长,所以我会用几个例子的形式 ...

  5. 各种GIT代码托管工具比较

    bitbucket免费支持5个开发成员的团队创建无限私有代码托管库. GOES是一个由GO语音编写的自组GIT托管服务. gitorious 是一个基于GIT版本控制系统的WEB项目托管平台,基于RU ...

  6. ssh: Could not resolve hostname问题终于解决了?

    1.如果系统为64位,无法启动启动hdfs: ./sbin/start-dfs.sh.并有以下错误: sed: -e expression #1, char 6: unknown option to  ...

  7. QList和QVector使用

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QList和QVector使用     本文地址:http://techieliang.com ...

  8. 一次性无重复配置VS项目插件属性的方法

    在VS中需要使用opencv开源库或mysql等数据库时,为了能使用开源库或数据库的语言,需要添加库文件和包含目录等等.然而直接在[解决方案管理器]-->属性中配置的话,写下一个项目(解决方案) ...

  9. javascript之彻底理解this

    彻底理解this,需要彻底理解函数 函数是复杂类型,存储在堆中.  函数是独立的, 对象中的方法只是对象中有个函数的引用 函数被调用时,调用者会像被调用者提供个上下文环境, 这个环境就是this 构造 ...

  10. Building simple plug-ins system for ASP.NET Core(转)

    Recently I built plug-ins support to my TemperatureStation IoT solution web site. The code for .NET ...