您的位置：首页 > Web前端 > JavaScript

js模板引擎之 Handlebars 基本用法

2017-03-14 17:40 435 查看

模板引擎比较久远的一个技术，常见的模板引擎有 baiduTemplate(百度)\artTemplate（腾讯）\juicer（淘宝）\doT\ tmpl\ handlebars\ easyTemplate\ underscoretemplate \ mustache \kissytemplate 等等

本篇简单介绍一下Handlebars相关常用例子：

Handlebars依赖jq，也可以写不依赖的jq的方式。本教程依赖。

Handlebars官方网站：http://handlebarsjs.com/

例子中有Handlebars的注释方式、数据循环绑定、if/else 判定、浏览器的调试log、自定义helper、自定义partials。

下面这块代码是Handlebars的模板代码：
<script id="table-template-xxxx" type="text/x-handlebars-template">
　　xxxx
</script>

下面代码是数据源代码，可以没有数据，比如log就可以没有数据
var dataxxxxxx = {xxxxxxx}

下面的代码是数据绑定以及页面html模板渲染的代码
var myTemplatexxxxx = Handlebars.compile($("#table-template-xxxxxxxx").html());
$('.xxxxxxxx').html(myTemplatexxxxxxxxxx(dataxxxxxxxx));

下面此处的代码表示的是模板生成的html插入到页面何处
<div class="xxxxxxxx"></div>

<!DOCTYPE html>
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>each-基本循环使用方法 - by 杨元</title>
</head>
<body>
<h1>each-基本循环使用方法</h1>
<!--基础html框架-->
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="tableList">

</tbody>
</table>
　　<!-- 模板生成完成之后插入的位置 -->
<div class="if"></div>
<div class="log"></div>
<div class="comments"></div>
<div class="helper"></div>
<div class="partials"></div>

<!--插件引用-->
<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/handlebars.min.js"></script>

<!--Handlebars.js模版-->
<!--Handlebars.js模版放在script标签中，保留了html原有层次结构,模版中要写一些操作语句-->
<!--id可以用来唯一确定一个模版,type是模版固定的写法-->

<!-- {{name}} 变量的多种写法，下面的几种方式都是当前页面，当前作用域的变量 -->
<!-- <p>{{./name}} or {{this/name}} or {{this.name}}</p> -->

<!-- 循环的写法 -->
<script id="table-template" type="text/x-handlebars-template">
{{#each student}}
<tr>
<td>{{name}}</td>
<td>{{sex}}</td>
<td>{{age}}</td>
</tr>
{{else}}
<h1>No content</h1>
{{/each}}
</script>

<!-- if的写法 -->
<script id="table-template-if" type="text/x-handlebars-template">

<div class="entry">
{{#if author}}
<h1>{{firstName}} {{lastName}}</h1>
{{else}}
<h1>Unknown Author</h1>
{{/if}}
</div>

</script>

<!-- log的写法 -->
<script id="table-template-log" type="text/x-handlebars-template">

{{log "Look at me!"}}

</script>

<!-- comments 的写法 -->
<script id="table-template-comments" type="text/x-handlebars-template">

{{!-- 哇啊哇哇哇 --}}
{{! 哇啊哇哇哇 }}

</script>

<!-- Helper的写法 -->
<script id="table-template-helper" type="text/x-handlebars-template">

<div class="entry">
<h1>{{title}}</h1>
{{#with story}}
<div class="intro">{{{intro}}}</div>
<div class="body">{{{body}}}</div>
{{/with}}
</div>

</script>

<!-- 创建元素的写法 -->
<script id="table-template-partials" type="text/x-handlebars-template">

<div class="post">
{{> userMessage tagName="h1" }}

<h1>Comments</h1>

{{#each comments}}
{{> userMessage tagName="h2" }}
{{/each}}
</div>

</script>

<!--进行数据处理、html构造-->
<script type="text/javascript">
$(document).ready(function() {
//模拟的json对象
var data = {
"student": [
{
"name": "张三",
"sex": "0",
"age": 18
},
{
"name": "李四",
"sex": "0",
"age": 22
},
{
"name": "妞妞",
"sex": "1",
"age": 18
}
]
};

// if的数据
var dataif = {
"author": false,
"firstName": "mary",
"lastName": "mei"
}

// helper数据
var datalist = {
title: "First Post",
story: {
intro: "Before the jump",
body: "After the jump"
}
}

// partials数据
var partials = {
author: {firstName: "Alan", lastName: "Johnson"},
body: "I Love Handlebars",
comments: [{
author: {firstName: "Yehuda", lastName: "Katz"},
body: "Me too!"
}]
};

//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。。。
var myTemplate = Handlebars.compile($("#table-template").html());
//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。
$('#tableList').html(myTemplate(data));

// if绑定的代码
var myTemplateIf = Handlebars.compile($("#table-template-if").html());
$('.if').html(myTemplateIf(dataif));

// log绑定的代码，在控制台输出
var myTemplateIf = Handlebars.compile($("#table-template-log").html());
$('.log').html(myTemplateIf());

// comments绑定的代码，注释代码
var myTemplateComments = Handlebars.compile($("#table-template-comments").html());
$('.comments').html(myTemplateComments());

// helper绑定代码，helper相当于一个自定义function
var myTemplateList = Handlebars.compile($("#table-template-helper").html());
Handlebars.registerHelper('with', function(datalist, options) {
return options.fn(datalist);
});
$('.helper').html(myTemplateList(datalist));

// partials 绑定代码
var myTemplatePartials = Handlebars.compile($("#table-template-partials").html());
Handlebars.registerPartial('userMessage',
'<{{tagName}}>By {{author.firstName}} {{author.lastName}}</{{tagName}}>'
+ '<div class="body">{{body}}</div>');
$('.partials').html(myTemplatePartials(partials));

});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航