模版引擎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 2952 Counting Sheep(DFS)
题目链接 Problem Description A while ago I had trouble sleeping. I used to lie awake, staring at the cei ...
- C# 几个特殊运算符的理解和Nullable<T> 的研究
可空值类型和?运算符 谈到运算符,大家一定很熟悉,但是对所有的运算符都能掌握吗? 看了下面代码再回答. Nullable<Int32> count = ; ; bool? flag = f ...
- 可以有效防护XSS，sql注射，代码执行，文件包含等多种高危漏洞。
http://bbs.aliyun.com/read/137391.html <?php /** * 云体检通用漏洞防护补丁v1.1 * 更新时间:2013-05-25 * 功能说明:防护XSS ...
- 第二部分 职责型模式responsibility
普通职责无法提供的内容,据此可以定义以下几种模式: 将职责集中到某个类的一个单独实例,单件模式 当一个对象发生改变时,依赖于这个对象的其他对象都能够得到通知,而这个发生改变的对象无须了解自己被其他哪些 ...
- 安装gensim
安装了一天的gensim,其中因为版本不一致等等各种问题纠结了好久,现记录如下: 正确安装方式: 1. 安装python2.7 2. 下载Python Extension Packages对应版本的n ...
- Codeforces 691D Swaps in Permutation
Time Limit:5000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Submit Status Prac ...
- Mysql 本地计算机无法启动 mysql 服务 错误 1067：进程意外终
1.重装后启动mysql服务,提示 本地计算机无法启动 mysql 服务 错误 1067:进程意外终止. 2.查看mysql根目录下有一 计算机名.err 打开一看全是英文的错误提示: 3.根据其中的 ...
- hdu_4718_The LCIS on the Tree(树链剖分+线段树合并)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4718 题意:给你一棵树,每个节点有一个值,然后任给树上的两点,问这两点的最长连续递增区间是多少 题解: ...
- flash 右键菜单隐藏与修改
来源:http://blog.sina.com.cn/s/blog_7264c84401014fmd.html import flash.ui.ContextMenu;import flash.ui. ...
- Qt::ConnectionType（信号与槽的传递方式）
Qt::AutoConnection 自动连接:(默认值)如果信号在接收者所依附的线程内发射,则等同于直接连接.如果发射信号的线程和接受者所依附的线程不同,则等同于队列连接. Qt::DirectCo ...