首页 > 代码库 > 使用 artTemplate模板

使用 artTemplate模板

2024-09-23 11:31:06   214人阅读

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>使用 artTemplate模板</title>
        <!-- 第一步：引入artTemplate模板引擎 -->
        <script src="http://www.mamicode.com/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=http://www.mamicode.com/{title:‘今天我中500万了‘,list: [‘文艺‘, ‘博客‘, ‘摄影‘, ‘电影‘, ‘民谣‘, ‘旅行‘, ‘吉他‘]};
                var html=template(‘mytmpl‘,data);
                box1.innerHTML=html;
            }
        </script>
    </body>
</html>

 

使用 artTemplate模板


联系
我们