模板引擎--artTemplate引用自定义函数-4.x版本

artTemplate引用自定义函数 

因为刚开始接触artTemplate，直接使用的我用的是4.X版本 , 对于旧版本不太了解，网上大神发的心得多数是基于老版本，但是通过这两天学习使用，发现差别挺大，踩了好多坑。想要了解更多的可以上这里看下https://github.com/aui/art-template/tree/4.0.0

因为我使用到了自定义函数这块，所以先分享下这块

template.helper这个方法4.X没有了，而是使用template.defaults.imports方式

看下4.X的解释本相关内容

关键代码：

data.json是要传入的数据，定义好就可以

template.helper替换成template.defaults.imports

userAllList.art是定义的模板

 $.getJSON("data.json", function (pageData) {//从文件获取数据
            //模板中引入自定义函数 引入一个toDate函数
            template.defaults.imports.toDate=toDate
            //读取template 模板文件 替换了template('userList', pageData)方式,使用下面这种方式需要在template-web.js中加入RenderTemplate函数
            var strTemp = RenderTemplate.renderFile( 'userAllList.art', pageData);
            $("#queryUserList").html(strTemp);
            // var html = template('userList', pageData);
            // document.getElementById('queryUserList').innerHTML = html;
        });

data.json

{
  "list": [
    {
      "age": 25,
      "createTime": {"date": 23,"day": 2,"hours": 0,"minutes": 0,"month": 6,"seconds": 0,"time": 1563811200000,"timezoneOffset": -480,"year": 119},
      "moblePhone": "183****8280",
      "userName": "张国立"
    },
    {
      "age": 24,
      "createTime": {"date": 23,"day": 2,"hours": 0,"minutes": 0,"month": 6,"seconds": 0,"time": 1563811200000,"timezoneOffset": -480,"year": 119},
      "moblePhone": "183****8280",
      "userName": "张铁林"
    },
    {
      "age": 22,
      "createTime": {"date": 23,"day": 2,"hours": 0,"minutes": 0,"month": 6,"seconds": 0,"time": 1563811200000,"timezoneOffset": -480,"year": 119},
      "moblePhone": "183****8280",
      "passWord": "1234",
      "userName": "邓婕"
    },
    {
      "age": 22,
      "createTime": {"date": 23,"day": 2,"hours": 0,"minutes": 0,"month": 6,"seconds": 0,"time": 1563811200000,"timezoneOffset": -480,"year": 119},
      "moblePhone": "183****8280",
      "passWord": "1234",
      "userName": "吳亦凡"
    },
    {
      "age": 22,
      "createTime": {"date": 23,"day": 2,"hours": 0,"minutes": 0,"month": 6,"seconds": 0,"time": 1563811200000,"timezoneOffset": -480,"year": 119},
      "moblePhone": "183****8280",
      "userName": "郭德纲"
    },
    {
      "age": 22,
      "createTime": {"date": 23,"day": 2,"hours": 0,"minutes": 0,"month": 6,"seconds": 0,"time": 1563811200000,"timezoneOffset": -480,"year": 119},
      "moblePhone": "183****8280",
      "passWord": "1234",
      "userName": "彭于晏"
    }

  ]
}

userAllList.art 模板文件，其中toDate是自定义函数

  {{each list as itemInfo index}}
    <tr
            {{if index%2==1 }}
            class="even"
            {{/if}}
    >
    <td>{{itemInfo.userName}}</td>
    <td>{{itemInfo.age}}</td>
    <td>{{itemInfo.moblePhone}}</td>
    <td>{{toDate(itemInfo.createTime)}}</td>
    <td>
        <button type='button' class='fleft btn btn-info' onClick="doTask({{itemInfo}})">删除</button>
    </td>
    </tr>
    {{/each}}

效果：

代码连接

https://download.csdn.net/download/qq_35463719/11429997