JS模板引擎—mustache与HandleBars
以前总听说模板引擎这个东西然而却没有研究过,这两天研究了一下模板引擎,最开始接触了mustache,它是一个客户端的模板引擎。 然后想了解一下服务端模板引擎,最开始接触了Jade发现这货太抽象风格不适合我。最后选择了 HandleBars 这款模板引擎。 它是mustache的一个扩展,支持客户端和服务端,很强大很好用,具体在客户端和服务端怎么使用,下面我给大家详解。
- 先说说mustache吧
1.引入
可以在github上获取相关的Mustache.js的文件然后再script标签引入
或者使用 CDN 如下示范
<script src="http://cdn.bootcss.com/mustache.js/2.2.1/mustache.min.js"></script>
2.使用
{
{#}} {
{/}} 见下代码
var myData = {
students : [
{name : 'ruihao', years : 20, sex: 'man'},
{name : 'jiahua', years : 21, sex: 'man'},
{name : 'qinjie', years : 20, sex: 'woman'}
]
};
var template = "<div><table><tr><td>name</td><td>years</td><td>sex</td></tr>{
{
#students}}<tr><td>{
{
name}}</td><td>{
{
years}}</td><td>{
{
sex}}</td></tr>{
{
/students}}</table></div>";
var viewTemplate = Mustache.render(template, myData);
container.innerHTML = viewTemplate;
代码解释:
{
{#student}} {
{/student}} 实际上构成了一个循环,会遍历student这个数组,这个数组的每一个元素都是一个对象,所以每个对象的name,years,sex属性都会输出。 注意一下Mustache.render这个函数它接收两个参数:第一个是模板字符串,第二个是这个模板字符串的上下文对象,作为模板字符串的数据来源
最后页面为:
ruihao 20 man
jiahua 21 man
qinjie 20 woman
实际上{
{#}} {
{/}}不光有循环数组的作用。还有判断null/false/undefined的作用,如果为null/false/undefined 那么则不渲染
var myData