您的位置：首页 > 其它

Handlebars模板引擎简单使用

2016-01-15 11:09 337 查看

　　本例展示用Handlebars对一小段简单HTML模板进行渲染填充然后显示在页面。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Handlebars模板填充样例</title>
<script type="text/javascript" src="../jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../handlebars-v3.0.1.js"></script>
</head>
<body>
<div id="content"></div>

<!-- 模板 -->
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">{{body}}</div>
</div>
</script>

<script type="text/javascript">
// 编译模板
var source   = $("#entry-template").html();
var template = Handlebars.compile(source);

// 数据
var data = {
title: "My New Post",
body: "This is my first post!"
}

// 用编译后的模板对象，填充渲染JSON数据
$(function () {
var html = template(data);
$("#content").html(html);
// alert(Handlebars.escapeExpression(html)); //对<>进行转义，其在DOM不再具有标签含义。
})
</script>

</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航