模版引擎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=" ...
随机推荐
- jQuery 属性操作 - attr() 方法
定义和用法 attr() 方法设置或返回被选元素的属性值. 根据该方法不同的参数,其工作方式也有所差异. 实例1 设置被选元素的属性和值. <html><head><sc ...
- HTML转PDF
1)使用工具转换.如:wkhtmltopdf 2)Chrome浏览器打印功能中,有另存为PDF格式文件.(推荐最便捷)
- NGUI等比缩放
/// <summary> /// UI 等比缩放 /// </summary> static private void AdaptiveUI() { ; ; UIRoot u ...
- sql标识符和格式
数据库名是一个标识符,表名也是一个标识符,在SQL SERVER中标识符分为两类: (1).常规标识符;(2).分隔标识符两者重要的区别:常规标识符必须严格遵守命名的规定,而分隔标识符则可以不遵守命名 ...
- JPA 系列教程19-jpa-uuid主键生成策略
ddl语句 CREATE TABLE `t_user` ( `id` varchar(32) NOT NULL, `name` varchar(255) DEFAULT NULL, PRIMARY K ...
- 关于perl闭包(个人理解)
我个人理解,就是当一个变量超出作用域时,应是消失了,不见了的,但你还能访问它,这就是闭包. # #看下面的例子. #!/usr/bin/env perl -w use strict; { my $va ...
- 《OpenCV3编程入门》访问图像中像素的三类方法
·方法一 指针访问:C操作符[ ]; ·方法二 迭代器iterator; ·方法三 动态地址计算; #include <opencv2/core/core.hpp> #include &l ...
- 不自动切换eclipse视图
刚开始使用eclipse进行调试时,当弹出"Confir Perspective Switch"视图时,不小心点了“No”.以后每次debug的时候都不切换到debug视图. 后发 ...
- bzoj1977
1977: [BeiJing2010组队]次小生成树 Tree Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 3001 Solved: 751[Su ...
- 第十九节,基本数据类型,集合set
集合set,无序,是不允许重复内容的,也就是不允许重复元素,如果有重复,会自动忽略,可接收可迭代类型 (一般用于需要判断和处理交集时候用到) 集合与字典的区别是,集合没有键只有值,字典是有键的字典是一 ...