js模板引擎渲染-artTemplate

最新推荐文章于 2024-12-29 10:16:20 发布

宁缺100

最新推荐文章于 2024-12-29 10:16:20 发布

阅读量466

点赞数

CC 4.0 BY-SA版权

分类专栏：分布式前端框架文章标签：模板渲染 js

本文链接：https://blog.youkuaiyun.com/qq_24434491/article/details/79284736

分布式同时被 2 个专栏收录

26 篇文章

订阅专栏

前端框架

2 篇文章

订阅专栏

本文介绍了一种使用模板引擎处理数据的具体方法。通过定义模板并结合数据动态生成HTML内容，展示了如何利用JS进行页面元素的动态渲染。具体包括了引入JS库、定义数据结构及展示效果等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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