模版引擎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属性的，存在即为真。
最新文章
- Python导出Excel为Lua/Json/Xml实例教程（二）：xlrd初体验
- CSS的重要性
- Google搜索的几个使用技巧——让你的搜索结果更准确
- 安装 composer SSL operation failed with code 1
- Oracle索引(B*tree和Bitmap)学习
- git的牛逼
- java分页
- 谈谈分布式事务之三: System.Transactions事务详解[上篇]
- HashMap和Hashtable的差别
- 与apk签名有关的那些概念与命令
- Mysql的内连接,外链接,交叉链接
- 高通 MSM8K bootloader 之四： ramdump
- 1 Openwrt无线中继设置并访问外网
- maven中运行java程序
- java testng框架的windows自动化-自动运行testng程序下篇
- 关于html/css的一些小技巧之hack掉"margin-top"层叠问题
- android 平台 java和javascript 通信问题 A WebView method was called on thread 'JavaBridge'.
- PHP计算两个经纬度地点之间的距离
- 如何通过钉钉扫码登录odoo
- spring boot所有配置