js模板引擎渲染-artTemplate

引入js文件

<script src="../../lib/template-web.js"></script>

在body中定义容器

<div id="content"></div>

创建template

 <script id="test" type="text/html">

        {{if isAdmin}}

        <ul>
            {{each Unusable_systems value i}}
            <li>索引 {{i + 1}} ：{{Unusable_systems[i].name}}</li>
            {{/each}}
        </ul>

            {{each Unusable_systems value i}}
            <div class="responsive" id="system1">
                <div class="img">
                    <a target="_blank" href="img_forest.jpg">
                        <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400">
                    </a>
                    <div class="desc">
                        索引 {{i + 1}} ：{{Unusable_systems[i].name}}
                       </div>
                </div>
            </div>
            {{/each}}
        {{/if}}
        {{$data}}
    </script>

使用

    <script>
        var data = {
            title: '基本例子',
            isAdmin: true,
            list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
        };
         var datatest = { isAdmin: true,Unusable_systems:[{id:"1",name:"system1"},{id:"2",name:"system2"}]};
        /*var html = template('test', data);  "Unusable_systems":[{"id":"1","name":"system1"},{"id":"2","name":"system2"}]*/
        /*var html = template('test', datatest);*/
        var html = template('test', datatest);
        document.getElementById('contenttest').innerHTML = html;
</script>