模版引擎Handlebars语法

Posted 起个好名字

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模版引擎Handlebars语法相关的知识,希望对你有一定的参考价值。

 

<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语法的主要内容,如果未能解决你的问题,请参考以下文章

模版引擎Handlebars和Mustache

Handlebars的使用方法文档整理(Handlebars.js)

handlebars.js模版引擎随记

js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper

Handlebars模板引擎

Handlebars.js 模板引擎