<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

This is my first post!
 
第二部分的js代码如下——
var sourcehtml = $("second-template").innerHTML;//将这个id的下面所有数据整合
var template = Handlebars.compile(sourcehtml);//制作成模板
var html = template(context);
$('second_content').innerHTML = html;
和第一部分是一模一样的，就是说她们的意义相同，但是原本的模板有些改变，并且context也发生了改变——
模板：

<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元

Me too!

商品名称 牛奶 商品价格 89元

Me too!
 
第三个模板是这个样子的——

<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）的更多相关文章

  1. js模版引擎handlebars.js实用教程

    js模版引擎handlebars.js实用教程 阅读本文需要了解基本的Handlebars.js概念,本文并不是Handlebars.js基础教程,而是注重于实际应用,为读者阐述使用过程中可能会遇到的 ...

  2. Express学习 ------模版引擎(handlebars)

    Handlebars一款js模版引擎,我们在做客户端开发的时候,也可能已经使用过.它语法比较简单,和我们平常写的html 一样,只不过html 中可以加入handlebars 表达式. handleb ...

  3. 模版引擎Handlebars和Mustache

    Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用; 下面这个是基本的模版表达式, ...

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

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

  5. js模版引擎handlebars.js实用教程——each-基本循环使用方法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  6. js模版引擎handlebars.js实用教程——each-循环中使用this

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  7. js模版引擎handlebars.js实用教程——each嵌套

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  8. js模版引擎handlebars.js实用教程——循环中使用索引

    <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content="text/ ...

  9. js模版引擎handlebars.js实用教程——with-进入到某个属性(进入到某个上下文环境)

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

随机推荐

  1. 打开"我的电脑"等特殊文件夹ShellExecute

    procedure TForm2.btn10Click(Sender: TObject); begin ShellExecute(handle,'open','mailt', nil,nil,SW_S ...

  2. ESFramework 通信框架安全机制的设计与实现

    在分布式通信系统中,安全无疑是非常重要的.ESFramework通信框架提供了哪些安全保障了?由于ESFramework通信框架是应用层的开发框架,那么本文我们只讨论ESFramework通信框架在应 ...

  3. [ An Ac a Day ^_^ ] CodeForces 659D Bicycle Race 计算几何 叉积

    问有多少个点在多边形内 求一遍叉积 小于零计数就好了~ #include<stdio.h> #include<iostream> #include<algorithm&g ...

  4. Java 水仙花数

    小小练习大神掠过吧 题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.例如:153是一个"水仙花数&quo ...

  5. Openjudge-计算概论（A）-角谷猜想

    描述: 所谓角谷猜想,是指对于任意一个正整数,如果是奇数,则乘3加1,如果是偶数,则除以2,得到的结果再按照上述规则重复处理,最终总能够得到1.如,假定初始整数为5,计算过程分别为16.8.4.2.1 ...

  6. 【strtok()】——分割字符串

    对字符串进行分割: 在使用前需要先初始化例如: char * p=strtok(Str," ");/*初始化以" "(以空格字符来分割字符串),即把" ...

  7. python--tile函数

    1.函数的定义与说明 tile函数位于python模块 numpy.lib.shape_base中,功能是重复某个数组.比如tile(A,n),功能是将数组A重复n次,构成一个新的数组. 2.函数操作 ...

  8. Tomcat 启动报错：javax.naming.NamingException: No naming context bound to this class loader

    分析原因:在类中使用了Log .只是在项目lib路径下添加了slf4 的jar包,在Tomcat\lib下未添加 解决方案:将slf4的jar包放到tomcat\lib下.

  9. dom入门

    当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). //显示,改变html内容 document.getElementById("p1" ...

  10. HOSTS文件修改后不起作用的原因

    如果是通过记事本修改,其实是没有问题的,如果有问题,网上搜到的是ipconfig /flushdns之类的 如果是批量程序写的,那就要小心了, 一定要ANSI(美标格式的,忘了英文是什么来着) 保存后 ...