【artTemplate】artTemplate模板引擎入门（一）：简洁语法的使用

artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。
可以使用

arttemplate.js 简洁语法版

arttemplate-native.js 原生语法版（支持js语法）

本篇先介绍 简洁语法 版的基本使用

1.下载并引入js文件

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

2.定义一段HTML代码作为接收模板的盒子

    <!-- 接收模板的盒子 -->
    <div id="box"></div>

3.定义一个渲染模板

//注意 <script>的type属性可以随意设置，除了 type="text/javascript"，目的是为了不让他像普通js代码一样被编译

<script type="text/html" id="abc">
        <h1>{{title}}</h1>
        <ul>
            {{ each arr as value key }}
            <li>{{value}}</li>
            {{/each}}
        </ul>

        <ol>
            {{each json as value key}}
            <li> {{value}} </li>
            {{/each}}

        </ol>
    </script>

4.将数据和模板关联

arttemplate模板内置一个叫做template()方法，接收两个参数，使用方式：template(“模板id”, 要渲染的数据);，它的返回值可以简单的认为是一段html代码，

 window.onload = function() {
            var data = {
                title: "Welcome To ArtTemplate",
                arr: ["a", "b", "c", "d", "e"],
                json: {
                    a: 'aaa',
                    b: 'bbb',
                    c: 'ccc',
                    d: 'ddd'
                }
            }
            //获取接收模板盒子的元素
            var box = document.getElementById("box");
            //关联数据
            // 自带的template(模板， 数据)，返回值是一段html
            var strhtml = template("abc", data);
            //将元素的innerHTML 设为template方法返回的strhtml
            box.innerHTML = strhtml;
        }

结果如图

---

遍历json数据

1.html代码相同，不做赘述

2.定义模板

<script type="text/html" id="tpl">
    <ul>
        {{each json as value key}}
        <li> {{value}} === {{key}} </li>
        {{/each}}
    </ul>
</script>

3.关联数据和模板

<script>
    window.onload = function() {
        var data = {
            json: {
                a: 'aaa',
                b: 'bbb',
                c: 'ccc',
                d: 'ddd'
            }
        }
        var strhtml = template("tpl", data);
        var box = document.getElementById("box");
        box.innerHTML = strhtml;

---

模板内包含模板 include()

1.html代码相同，不做赘述

2.定义模板1和模板2

//模板1
<script type="text/html" id="tpl1">
    {{title}} {{ include "tpl2" }}
</script>
//模板2
<script type="text/html" id="tpl2">
    <ul>
        {{ each json as value key }}
        <li>{{key}}--->{{ value }}</li>
        {{/each}}
    </ul>
</script>

3.渲染模板&关联数据

<script>
    window.onload = function() {
        var data = {
            title: "Welcome To ArtTemplate",
            arr: ["a", "b", "c", "d", "e"],
            json: {
                a: 'aaa',
                b: 'bbb',
                c: 'ccc',
                d: 'ddd'
            }
        }


        var box = document.getElementById("box");

        var strhtml = template("tpl1", data);

        box.innerHTML = strhtml;
    }
</script>

简介语法 简单用法演示完毕