artTemplate-3.0

artTemplate-3.0

新一代 javascript 模板引擎

模板语法

{{if admin}}

    {{include 'admin_content'}}

    {{each list}}

	{{$index}}. {{$value.user}}

{{/each}}
{{/if}}

原生语法

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

    <%for (var i=0;i

	<%=i%>. <%=list[i].user%>

<%}%>
<%}%>

当然需要下载2个版本的js

---

模板写法 

{{变量}}   是转移输出

{{#变量}} 是不转移输出

---

方法

var html = template('test', data);  id 和 数据

返回内容的值 如果没有data参数 直接返回一个渲染函数

<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}

<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>

{{/if}}
</script>

<script>
var data = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>

---

 template.compile(source); 获取js里的模板

<h1>在javascript中存放模板</h1>
<div id="content"></div>
<script>
var source = '<ul>'
+    '{{each list as value i}}'
+        '<li>索引 {{i + 1}} ：{{value}}</li>'
+    '{{/each}}'
+ '</ul>';
var render = template.compile(source);
var html = render({   //渲染函数
    list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
document.getElementById('content').innerHTML = html;
</script>

---

调试错误

可以用谷歌浏览器的canslo 和火狐的控制台 查案错误提示

---

子模板

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

<script>
var data = {
title: '嵌入子模板',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>