bower install artTemplate --save

快速上手

模板定义：

 

<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>

 

function(item,index)

数据绑定

 

语法说明

1. 版本

有两个版本的模板语法可以选择

简洁语法

推荐使用，语法简单实用，利于读写，使用template.js。

{
   {if admin}}     {
   {include 'admin_content'}}     {
   {each list}}          
    
     {
   {$index}}. {
   {$value.user}}
    
     {
   {/each}} {
   {/if}}

 

原生语法

使用template-navative.js

 

<%if (admin){%>     <%include('admin_content')%>     <%for (var i=0;i
    
               
     
      <%=i%>. <%=list[i].user%>
     
     <%}%> <%}%>
    

2. 显示属性

#代表属性不转义，会按照原始串输出，如果是标签会被解析成dom

{
   {#title}}

3. 判断

{
   {if isAdmin}}     
{
   {title}}
 {
   {/if}}

{
   {if isAdmin}}     
{
   {title}}
 {
   {else}}     
    
     {
   {message}}
    
 {
   {/if}}

{
   {if type==1}}     
{
   {title}}
 {
   {/if}}

4. 循环

{
   {each list as value i}}     
索引 {
   {i + 1}} ：{
   {value}}
 {
   {/each}}

{
   {each list}}     
索引 {
   {$index}} ：{
   {$value}}

{
   {include ‘test’ }} {
   {/each}}

{
   {each data}}              {
   {$value.agent_name}}         {
   {$value.agent_id}}         {
   {$value.type}}                      {
   {each $value.items}}                 {
   {$value}}             {
   {/each}}              {
   {/each}}

5. 引入

引入id为list的模板

{
   {include 'list'}}

模板定义

6. 使用type=“text/html”的script标签

7. 使用js的变量存储模板

var source = '
    
     ' +    '{
   {each list as value i}}' +        '
     
索引 {
   {i + 1}} ：{
   {value}}
' +    '{
   {/each}}' + '
    
';

var source = '\         
    
     \           {
   {each list as value i}}\             
     
索引 {
   {i + 1}} ：{
   {value}}
\           {
   {/each}}\         
    
\         ';

方法

注意：各个方法传递的数据必须是具有属性的对象,不能是数组

{data:{}} 或者{data:[]}

8. template(id, data)

根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。

如果没有 data 参数，那么将返回一渲染函数。

9. template.compile(source)

template.compile()接收模板字符串，会返回一个函数，使用该函数传入数据构建html

//var html= template.compile(source)(data);     document.querySelector('#list').innerHTML=html; 

10.     template.helper(name, callback)

添加辅助方法。

 

 

handerbar

 

这种方式的的缺点是，模板通过字符串拼接，不好维护，适合简单模板。