Biegral Blog

引入文件

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

一.遍历数组

html

  <div id="box"></div>

配置模板

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

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

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

    box.innerHTML = strhtml;
</script>

2.遍历json

配置模板

<script type="text/html" id="tpl">
    <ul>
        <% for (key in obj) {%>
            <li>
                <%= key %>---
                    <%=obj[key]%>
            </li>
            <%}%>
    </ul>
</script>

渲染模板

<script>
    var data = {
        obj: {
            a: 'aaaa',
            b: 'bbbb',
            c: 'cccc',
            d: 'ddddd',
            e: 'eeee'
        }
    }

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

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

    box.innerHTML = strhtml;
</script>

3.原生扩展函数

模板

script type="text/html" id="tpl">
    <h1>
        <%=  toDouble(a)  %>
    </h1>
</script>

<script>
    var data = {
        a: 'aaaaaa'
    }

    // 声明扩展函数
    template.helper("toDouble", function(str) {
        return str + "-----双击666"
    })

    var strhtml = template("tpl", data);
    var box = document.getElementById("box");
    box.innerHTML = strhtml;
</script>