artTemplate模板引擎使用

artTemplate有两个版本，简洁版和原生版；
1.简洁版兼容jsp,引用template.js;
2,原生版不兼容jsp,但是写法和js相似，引用template-web.js；

ps:楼主遇到过，写原生的放在jsp,报错500，解救方法是放入单独的js文件中。

如果是简单的模板，我当然是推荐写原生，方便给后面的人维护，与js的写法相似.

但是如果是页面内容多而且复杂，我推荐写简单版；

1.template.compile()的使用

template.compile(source, options)

可以直接在js中使用字符串作为模板内容进行编译，之后将返回一个渲染函数。options参数猜想应该是局部配置

模板通过字符串拼接，不好维护，适合简单模板

list可以存放ajax请求回来的数据，以上是template.compile 的写法， template.compile() 把模版编译成函数并储存好，如果再次调用模版，则不用重新去获取模版。

html部分

<ul class="titles-ul" id="contents"></ul>

js部分

    var source =    '<% for (var i = 0; i < list.length; i ++) { %>'
    	+        '<li><%= list[i].name %></li>'
    	+    '<% } %>';
    	var render = template.compile(source);
    	var html = render({list: ['摄影', '电影', '民谣', '旅行', '吉他']}); 
 document.getElementById('contents').innerHTML = html;

以下是效果图

2.template的使用

template(id, data)

根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。如果没有 data 参数，那么将返回一个渲染函数

html部分

			<ul class="aling-none">
                            <script id="operation" type="text/html">
                                <li> 
                                  <span class="aling-left">地址：</span> 
                                  <span class="aling-right">.....</span> 
                                </li>
                                <li> 
                                  <span class="aling-left">映射地址：</span> 
                                  <span class="aling-right">http:.....</span> 
                                </li>
                                <li>
                                  <span class="aling-left">支持格式：</span> 
                                  <span class="aling-right">{{format}}</span> 
                                </li>
                                <li>
                                  <span class="aling-left">请求方法：</span> 
                                  <span class="aling-right">{{method}}</span>                             
                                </li>
                              </script>
                         </ul>

js部分

    $.ajax({
        type: 'post',
        url: path,   //后台给的路径，也可以传id,值之类的
    }).done(function(data){    //后台返回的数据 

        var dataGrid=JSON.parse(data);   //需要转化格式
        var html = template('operation', data);   //template根据id渲染模板         
        $(".aling-none").html(html);   
    });

 以下是效果图

3.简洁版写法

html部分

  	<tbody id="requestParams">
               <script id="requests" type="text/html">
                       {{each list as value i }}
                              <tr>
                                  <td>{{value.param}}</td>
                                  <td>{{value.paramType}}</td>
                                  <td>具体操作的指令接口名称，例如想要调用创建命名空间接口，则Action参数即为CreatNamespace</td>
                                  <td>是</td>
                               </tr>
                         {{/each}}
               </script>
       </tbody>

JS部分

 $.ajax({
        type: 'post',
        url: path,   //后台给的路径，也可以传id,值之类的
    }).done(function(data){    //后台返回的数据 
       var dataGrid=JSON.parse(data);   //需要转化格式
       var requestParams={
            	   list : JSON.parse(dataGrid.requeset)
            	}
       var requests = template('requests',requestParams)
       $("#requestParams").html(requests);
    });

效果如下：

4.原生版

html部分

<div class="contents"> 

<script id="test" type="text/html">       
    <%for (var i=0;i<list.length;i++) {%>
        <li><%=list[i]%></li>
    <%}%>        
</script>

<div>

js部分

var data = {  
        title: '标签',

	list: ['摄影', '电影', '民谣', '旅行', '吉他']       
    };  
    var html = template('test', data);            
    document.getElementById('contents').innerHTML = html;