js模板引擎渲染artTemplate教程

引入js文件

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

在body中定义容器

<p id="content"></p>

创建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}}

            <p class="responsive" id="system1">

                <p class="img">

                    <a target="_blank" href="img_forest.jpg">

                        <img src=https://www.2cto.com/uploadfile/2018/0208/20180208020252503.jpg" alt="forest" width="600" height="400">

                    </a>

                    <p class="desc">

                        索引 {{i + 1}} ：{{unusable_systems[i].name}}

                       </p>

                </p>

            </p>

            {{/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>