一、为什么要用art-template模板
在实习的一次项目中,因为需求中展示表格的字段有很多个,后端返回的也是json数据,这时候如果还是使用之前的字符串拼接,这样会开发得比较慢,而且容易出错,而且也不具有扩展性。
因此,为了方便开发,我开始去查有没有简单的方法,发现了一个模板:art-template。这个模板是腾讯封装的,而且看了语法那些都比较简单,而且只有6kB.
二、使用art-template模板实践
因为涉及到公司的项目,这里就不贴代码了,我在网上看了一篇文章:https://www.jianshu.com/p/5f3b9600bbbe
这里面说了常用的art-template模板的四个方法:
- template(id,data)
- template.compile(source,options):这个将source这个模板源代码编译成函数,这个方法会返回一个函数,如render(data),将data数据传入就会返回渲染结果html。
- template.render(source,data,options):这个是将source模板源代码编译成函数并立即执行,返回渲染结果html
- template.helper(name,callback):这个是添加辅助方法
举例:
//js代码中声明一个辅助函数
template.helper('hi', function(name,age){
console.log('你好! 我叫'+name);
console.log('我今年'+age+'岁');
//注意最后一定要返回一个结果给视图,否则这函数就没多大意义了
return 'result';
})
辅助函数声明后模板中就可以进行调用了
原生语法如下:
<%=hi('高同学',23)%>
如果辅助函数有多个参数::
<%=hi('高同学',23,'value1','value2'..)%>
简洁语法如下:
{{value |hi:23}}
如果辅助函数有多个参数:
{{value | hi:'value1','value2'..)}}