artTemplate基本使用方法

一.方法

1.template(id1, data)用script标签来展示
根据 id1 渲染模板。内部会根据document.getElementById(id2)查找模板。
如果没有 data 参数，那么将返回一渲染函数。

var html = template('test', data);
document.getElementById('content').innerHTML = html;


2.template.compile(source, options)将渲染模板用javascript拼接实现
将返回一个渲染函数。
    var render = template.compile(data);  //data是模板，，用$.get获取
    var str = render(obj);
    document.getElementById('content').innerHTML = str;

二.例子

(一).用type="text/html"的script标签存放模板

注意：

1.必须给script标签定义id，而且只能是id，不能是class。

因为在使用template(id,data)方法的时候，该方法会根据id渲染模板，引擎内部会根据document.getElementById(id)查找模板。如果使用class作为参数，artTemplate引擎会报错。如果没有 data 参数，将返回一渲染函数。

2.在script标签中的type类型默认为type/javascript。在script标签中，必须重新声明type类型为text/html，否则会没有效果。

(二).引入模板页的写法

1.构建模板页 :template-me.html

{{if isAdmin}}
	
{{title}}
	

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

2.进行模板替换 
由于模板是单独写在一个页面的，所以我们需要ajax的get方法获取到模板页，然后在进行模板替换。

这里，我使用的是jQuery的get方法获取模板页，然后再利用template.compile()获取渲染内容，然后将数据obj渲染进去，最后添加到页面里即可。

注意：这时候就不能使用template()方法进行模板替换了，必须使用template.compile()及render()进行模板替换才行。

(三).复杂数据（数组嵌套）的模板写法

1.表格的模板

inputData下有一个orderArray的对象数组，而在orderArray下还有identity，identity下还有id_type。如果我们需要使用id_type里的数据进行模板替换。那么我们只需要进行多次each循环数组即可。

    
        
        
        
    

	

        

            
姓名
            
证件类型
            
证件号
            
手机号
            
出生日期
        
        


        
    

    

        
编号：111
        
姓名：张三
        
证件类型：张三
        
证件号：1111
        
手机号：张三
        
出生日期：张三
        
所在地：北京
        
 取消 确定