前端渲染模板artTemplate

一、引入art-template.js文件

<script src="template-debug.js"></script>

二、编写HTML模板

<script id="test" type="text/html">
    <h1>{{title}}</h1>
</script>

三、向模板插入数据，并输出到页面

var data = {
    title:"hello world"
};
var html = template("test",data);
document.getElementById('content').innerHTML = html;

<script id="test" type="text/html">
    <h1>{{title}}</h1>
</script>

流程控制语句
（if else）
{{if value}}
…
{{else if value}}
…
{{else}}
…
{{/if}}

循环遍历语句
{{each name}}
索引：{{ $ index}}
值：{{ $ value}}
{{/each}}

调用自定义方法
可以直接在{{}}中调用

<script id="test" type="text/html">
    {{if c==100}}
        <ul>
            {{each person}}
                <li>姓名：{{$value.name}}--性别：{{show($value.sex)}}</li>
            {{/each}}
        </ul>

    {{/if}}
</script>

//自定义函数
   template.defaults.imports.show = function(sex){
      console.log(sex);//同样可以打印日志到控制台
        if(sex==0){
        return "男"
        }else if(sex==1){
              return "女"
      }
        };