模版引擎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=" ...
随机推荐
- HDU 1969 Pie(二分搜索)
题目链接 Problem Description My birthday is coming up and traditionally I'm serving pie. Not just one pi ...
- Openjudge-计算概论（A）-统计字符数
描述: 判断一个由a-z这26个字符组成的字符串中哪个字符出现的次数最多输入第1行是测试数据的组数n,每组测试数据占1行,是一个由a-z这26个字符组成的字符串每组测试数据之间有一个空行,每行数据不超 ...
- Openjudge-计算概论（A）-分数求和
描述: 输入n个分数并对他们求和,并用最简形式表示.所谓最简形式是指:分子分母的最大公约数为1:若最终结果的分母为1,则直接用整数表示. 如:5/6.10/3均是最简形式,而3/6需要化简为1/2, ...
- Just do it！！！
4月英语竞赛期中考试 5月初级程序员考试 6月英语四级考试 7月期末考试 加油吧年轻人!
- js添加div
有这样一段div布局 <div class="clearfix"> <p class="left c"> <s ...
- jail brak 获取当前安装app列表
ios 5 6 7 可以通过解析"/private/var/mobile/Library/Caches/com.app.mobile.installation.plist" 文件获 ...
- RuntimeError: module compiled against API version 0xa but this version of numpy is 0x9
之前测试安装好Theano之后就去安装Tensorflow,然后再回来执行Theano的测试语句的时候,就出现以下错误了: google了一下,尝试了一下解决方法 import numpy print ...
- oracle 序列介绍
序列介绍 序列是一个计数器,它并不会与特定的表关联.通过创建Oracle序列和触发器实现表的主键自增. 序列的用途一般用来填充主键和计数. 序列使用 1.创建序列 ORACLE序列的语法格式为: CR ...
- ZUFE OJ 2288 God Wang I
Description God Wang 是ZUFE的神犇,有一天他想到一种神奇的变换,并且将它命名为GodW变换 对于一个数字n,该变换后的值GodW(n)为,先令X=n 第一步,如果X为个位数,G ...
- 您可能无法使用服务器管理器，如果两个线程同时访问 IIS 管理 IIS 的修补程序
http://support.microsoft.com/kb/946517 如果多线程操作 win2003 iis 失败, 打上这个补丁就好了