欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js模板引擎渲染artTemplate教程

程序员文章站 2023-11-20 12:51:04
引入js文件 在body中定义容...

引入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>