ArtTemplate的简单介绍

特性

include

快速上手

编写模板

type="text/html"

script

<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>

渲染模板

var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;

模板语法

简洁语法

{{if admin}}
{{include 'admin_content'}}

{{each list}}
<div>{{$index}}. {{$value.user}}</div>
{{/each}}
{{/if}}

原生语法

<%if (admin){%>
<%include('admin_content')%>

<%for (var i=0;i<list.length;i++) {%>
<div><%=i%>. <%=list[i].user%></div>
<%}%>
<%}%>

下载

方法

template(id,
data)

document.getElementById(id)

template.

compile

(source,
options)

template.

render

(source,
options)

template.

helper

(name,
callback)

template.

config

(name,
value)

'{{'

"}}"

true

true

false

使用预编译

template('tpl/home/main', data)

{{include '../public/header'}}

基于预编译：

NodeJS

安装

npm install art-template -g

使用

var template = require('art-template');
var data = {list: ["aui", "test"]};

var html = template(__dirname + '/index/main', data);

配置

''

'.html'

'utf-8'

path

include

template.config('path', __dirname);
var html = template('index/main', data)

Web模板引擎——Mustache

Web 模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，通常是标准的
HTML 文档。当然不同的开发语言有不同模板引擎，如 Javascript 下的 Hogan 、ASP 下的 aspTemplate、以及 PHP 下的 Smarty，这里主要介绍基于 Javascript 语言的模板引擎，目前流行有 Mustache、Hogan、doT.js、JsRender、Kendo UI Templates等，jsperf.com 上可以看到它们的性能对比，首先先介绍下 Mustache。

一、Mustache 简介：

二、Mustache 语法：

...
<script type="text/javascript" src="mustache.js"></script>
<script type="text/javascript">
var data = {
"company": "Apple",
"address": {
"street": "1 Infinite Loop Cupertino</br>",
"city": "California ",
"state": "CA ",
"zip": "95014 "
},
"product": ["Macbook ","iPhone ","iPod ","iPad "]
}

var tpl = '<h1>Hello {{company}}</h1>';
var html = Mustache.render(tpl, data);

console.log( html )
</script>
...

//运行后 Console 输出：

<h1>Hello Apple</h1>

Mustache.render(tpl,
data)

{{keyName}}

{{}}

var tpl = '{{company}}';
var html = Mustache.render(tpl, data);
//输出：
Apple

{{#keyName}} {{/keyName}}

#

/

var tpl = '{{#address}} <p>{{street}},{{city}},{{state}}</p> {{/address}}';
var html = Mustache.render(tpl, data);

//输出：
<p>1 Infinite Loop Cupertino</br>,California,CA</p>

{{#keyName}} {{/keyName}}

{{^keyName}} {{/keyName}}

{{#keyName}} {{/keyName}}

var tpl = {{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}};
var html = Mustache.render(tpl, data);
//输出：
没找到 nothing 键名就会渲染这段

{{.}}

{{.}}

var tpl = '{{#product}} <p>{{.}}</p> {{/product}}';
var html = Mustache.render(tpl, data);
//输出：
<p>Macbook </p> <p>iPhone </p> <p>iPod </p> <p>iPad </p>

{{>partials}}

>

var tpl = "<h1>{{company}}</h1> <ul>{{>address}}</ul>"
var partials = {address: "{{#address}}<li>{{street}}</li><li>{{city}}</li><li>{{state}}</li><li>{{zip}}</li>{{/address}}"}
var html = Mustache.render(tpl, data, partials);
//输出：
<h1>Apple</h1>
<ul><li>1 Infinite Loop Cupertino</br></li><li>California</li><li>CA</li><li>95014</li></ul>

{{{keyName}}}

{{keyName}}

{{{}}}

var tpl = '{{#address}} <p>{{{street}}}</p> {{/address}}'
//输出：
<p>1 Infinite Loop Cupertino</br></p>

{{!comments}}

!

{{!这里是注释}}
//输出：