模版引擎Handlebars语法（1）
<script src="handlebars.js"></script>
</head>
<body>
<div id="content"></div>
<div id="second_content"></div>
<div id="third_content"></div>
<script id="first_entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script id="second-template" type="text/lsdjfldsjlf">
<h1>Comments {{body}}</h1>
<div id="comments">
{{#each comments}}
<h2>
<a href="/posts/{{../permalink}}">
<span>商品名称</span>
{{author.firstName}}
<span>商品价格</span>
{{author.lastName}}
</a>
</h2>
<div>{{body}}</div>
{{/each}}
</div>
</script>
<script id="third-template" type="text/lsdjfldsjlf">
<h1>third Comments {{body}}</h1>
<div id="comments">
{{#each comments}}
<h2>
<a href="/posts/{{../permalink}}">
<span>商品名称</span>
{{author.firstName}}
{{#if downflag}}
<span>已下架</span>
{{/if}}
{{#if upflag}}
<span>已上架</span>
{{/if}}
<span>商品价格</span>
{{author.lastName}}
</a>
</h2>
<div>{{body}}</div>
{{/each}}
</div>
</script>
<script>
function $(id) {
return document.getElementById(id);
}
var sourcehtml = $("first_entry-template").innerHTML;
var template = Handlebars.compile(sourcehtml);
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
$('content').innerHTML = html;
console.log(html);
var sourcehtml = $("second-template").innerHTML;//将这个id的下面所有数据整合
var template = Handlebars.compile(sourcehtml);//制作成模板
var html = template(context);
$('second_content').innerHTML = html;
var sourcehtml = $("third-template").innerHTML;
var template = Handlebars.compile(sourcehtml);
var html = template(context);
$('third_content').innerHTML = html;
</script>
以上是部分代码，首先看视图1，也就是first_entry-template部分，相关代码如下：
<script id="first_entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
handlebar的相关代码都是写在script标签当中的，其中｛｛｝｝中间的部分代表视图，其内容会随着js代码的改变而改变，例如对于给出的伪json代码：
第一部分给出了这个代码——
var sourcehtml = $("first_entry-template").innerHTML;
var template = Handlebars.compile(sourcehtml);
var context = {title: "My New Post", body: "This is my first post!"};
var html = template(context);
$('content').innerHTML = html;
通过更上面的js代码结合起来就是获得id为first_entry-template的元素，将其内容赋值给sourcehtml
第二句通过 Handlebars.compile将其转变成模板。
第三句创建了一个伪json数据context
第四句将模板解析成函数，括号中的内容就是变量，于是，最终执行结果就是——
My New Post
var template = Handlebars.compile(sourcehtml);//制作成模板
var html = template(context);
$('second_content').innerHTML = html;
<script id="second-template" type="text/lsdjfldsjlf">
<h1>Comments {{body}}</h1>
<div id="comments">
{{#each comments}}
<h2>
<a href="/posts/{{../permalink}}">
<span>商品名称</span>
{{author.firstName}}
<span>商品价格</span>
{{author.lastName}}
</a>
</h2>
<div>{{body}}</div>
{{/each}}
</div>
</script>
context：
var context = {
body: "I Love Handlebars",
comments: [{
author: {
firstName: "香蕉",
lastName: "89元"
},
body: "Me too!",
upflag: true
}, {
author: {
firstName: "牛奶",
lastName: "89元"
},
body: "Me too!",
downflag: true
}]
};
不过既然原理是一样的，那么其中部分东西我们也能直接得到——
<script id="second-template" type="text/lsdjfldsjlf">
<h1>Comments {{body}}</h1> //获得context.body的内容
<div id="comments">
{{#each comments}}
<h2>
<a href="/posts/{{../permalink}}">
<span>商品名称</span>
{{author.firstName}}
<span>商品价格</span>
{{author.lastName}}
</a>
</h2>
<div>{{body}}</div>
{{/each}}
</div>
</script>
但是这里出现了循环，其代码为{{#each comments}}{{/each}}
意味着这两个视图之间的都是循环，而循环的东西就是comments的元素，是context中的一个属性，也是n个商品对象的集合，于是这里的循环次数就是商品次数。
其对应得内容就是商品的属性，执行结果为——
Comments I Love Handlebars
商品名称 香蕉 商品价格 89元
商品名称 牛奶 商品价格 89元
<script id="third-template" type="text/lsdjfldsjlf">
<h1>third Comments {{body}}</h1>
<div id="comments">
{{#each comments}}
<h2>
<a href="/posts/{{../permalink}}">
<span>商品名称</span>
{{author.firstName}}
{{#if downflag}}
<span>已下架</span>
{{/if}}
{{#if upflag}}
<span>已上架</span>
{{/if}}
<span>商品价格</span>
{{author.lastName}}
</a>
</h2>
<div>{{body}}</div>
{{/each}}
</div>
</script>
js代码一样，模板中多出了个
{{#if upflag}}
<span>已上架</span>
{{/if}}
意思是这里有一个判断，如果#if 后面的部分为真则执行下面的话。
一般来说这是用来判断这个对象是否有upflag属性的，存在即为真。
模版引擎Handlebars语法（1）的更多相关文章
- js模版引擎handlebars.js实用教程
js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...
- Express学习 ------模版引擎(handlebars)
Handlebars一款js模版引擎,我们在做客户端开发的时候,也可能已经使用过.它语法比较简单,和我们平常写的html 一样,只不过html 中可以加入handlebars 表达式. handleb ...
- 模版引擎Handlebars和Mustache
Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用; 下面这个是基本的模版表达式, ...
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...
- js模版引擎handlebars.js实用教程——each-基本循环使用方法
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- js模版引擎handlebars.js实用教程——each-循环中使用this
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
- js模版引擎handlebars.js实用教程——each嵌套
<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...
- js模版引擎handlebars.js实用教程——循环中使用索引
<!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...
- js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)
返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...
随机推荐
- Inno setup 中 执行参数传递注意的地方
Inno setup编译器编译使用pascal脚本编写的打包代码,其中Run段可以执行某些特定的程序,遇到一个bat批处理文件传递参数的问题,记录如下 1: [Run] 2: Filename: &q ...
- Openjudge-计算概论（A）-鸡尾酒疗法
描述: 鸡尾酒疗法,原指“高效抗逆转录病毒治疗”(HAART),由美籍华裔科学家何大一于1996年提出,是通过三种或三种以上的抗病毒药物联合使用来治疗艾 滋病.该疗法的应用可以减少单一用药产生的抗药性 ...
- MMS model
- crontab定时任务
使用cron服务,用 service crond status 查看 cron服务状态,如果没有启动则 service crond start启动它, cron服务是一个定时执行的服务,可以通过cro ...
- FbinstTool（U盘启动盘制作工具) v1.606 免费绿色版
软件名称: FbinstTool(U盘启动盘制作工具) v1.606 免费绿色版软件语言: 简体中文授权方式: 免费软件运行环境: Win7 / Vista / Win2003 / WinXP / W ...
- js控制日期选择框datetime-local和select的展开
注: js控制元素展开不受元素css属性的限制,例如opacity,z-index等 1. 使用js控制日期选择框的展开 ios: document.querySelector(".targ ...
- 一些常见warning的原因和解决方法
在入职三周后,终于赶齐了接手项目落下两个月的项目,有了一些自己的空闲时间对项目进行整理.主要整理包括类目的整合,从原来一个系统文件夹下几百个文件整改为以MVC设计思想为原则的分文件夹整理类目,井然有序 ...
- html5 --基础笔记2
1.autocomplete 可以给表单本身(不是fieldset)设置属性来禁用整个表单的自动完成功能 <form id="" method="" au ...
- Android PagerAdapter的用法
转http://blog.csdn.net/look85/article/details/8563906 在写这个之前,真心需要吐槽一下…关于Android开发中,PageAdapter的用法在网上能 ...
- sping时间触发器
而在Spring里很好的集成了Quartz,在xml文件里面配一下时间就可以自动执行,不需要写一行代码. <bean id="methodInvokingJobDetail" ...