使用 artTemplate模板

Posted 2020-09-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用 artTemplate模板相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>使用 artTemplate模板</title>
        <!-- 第一步：引入artTemplate模板引擎 -->
        <script src="/js/template.js"></script>
        <style>
            .on{color:#f00;}
        </style>
    </head>
    <body>

        <div id="box1"></div>
        
        <!-- 第二步：编写模板 -->
        <!--
            模板的写法：
                <script id="模板ID值" type="声明代码的类型是模板">
                </script>
                注意： 模板使用的是 script标签，必须要有两个属性： id  type
        -->
        <script id="mytmpl" type="text/html">
            <h1>{{title}}</h1>
            {{each list}}
                <p class="on">{{$value}}</p>
            {{/each}}
        </script>
        
        <script>
            window.onload=function(){
                /*
                 * 第三步：渲染模板
                 *     3.1 获得数据
                 *         通过AJAX或者自定义，必须是 JSON数据
                 * 
                 *     3.2 渲染模板
                 *         var html=template(‘模板ID‘,JSON数据);
                 * 
                 *     3.3 DOM操作将结果显示在页面上
                 *         box1.innerHTML=html;
                 */
                var data={title:‘今天我中500万了‘,list: [‘文艺‘, ‘博客‘, ‘摄影‘, ‘电影‘, ‘民谣‘, ‘旅行‘, ‘吉他‘]};
                var html=template(‘mytmpl‘,data);
                box1.innerHTML=html;
            }
        </script>
    </body>
</html>

以上是关于使用 artTemplate模板的主要内容，如果未能解决你的问题，请参考以下文章

arttemplate与webpack的应用

js模板引擎--artTemplate