ajax请求数据填充表格———使用art-template模板提高效率

一、为什么要用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'..)}}
原文地址:https://www.cnblogs.com/sminocence/p/9779496.html