前台的模版引擎有许多种,相比较而言 我个人更觉得handlebars更为轻便
首先github上下载自新版本的handelbars.js http://handlebarsjs.com
下载下来之后呢 我们需要在页面引入js
1 <script type="text/javascript" src="script/jquery.js"></script>2 <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
引入之后我们需要在html中定义数据占位 在handlebars中最基本的就是使用 {{ }} 包裹 例如{{value}} handlebars模块会自动匹配相对应的值,对象或者函数
1 <div class="demo">2 ????<h1>{{name}}</h1>3 ????<p>{{content}}</p>4 </div>你也可以单独的制作一个模版,用id或者class来确定唯一性,type是固定的 不可缺少
1 <script id="tpl" type="text/x-handlebars-template">2 ????<div class="demo">3 ????????????<h1>{{title}}</h1>4 ????????????<p>{{content.title}}</p>5 ????</div>6 </script>在js中使用handlebars.compile()来预编译模版
1 //用jquery获取模板2 var tpl ?= ?$("#tpl").html();3 var template = Handlebars.compile(tpl);4 //模拟json数据5 var context = { name: "zhaoshuai", content: "learn Handlebars"};6 //匹配json内容7 var html = template(context);一般我们使用模版引擎最主要还是解决数据的遍历问题 所以 handlebars里面有内置的表达式 each 我们可以利用 {{#each name}}来遍历列表块的内容,用this来引用遍历的元素, name是数组
1 <ul>2 ??????{{#each name}}3 ????????<li>{{this}}</li>4 ??????{{/each}}5 </ul>对应json是：
1 {2 ??name: ["html","css","javascript"]3 };编译后：
1 <ul>2 ??<li>JavaScript</li>3 ??<li>HTML</li>4 ??<li>CSS</li>5 </ul>
在最后必须要提的是 引入的时候一定要放在 jquery的后面 不然handlebars里面有的方法会报错的
再补一点 模版内的 注释
写法如下:
1 {{! handlebars comments }}最后贴上一张 写好的代码
handlebars.js模版引擎随记
原文地址：https://www.cnblogs.com/we-jack/p/8432486.html