码迷,mamicode.com
首页 > 其他好文 > 详细

使用 artTemplate模板

时间:2017-05-19 19:26:38      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:ext   3.3   操作   nload   引入   value   dom   logs   json   

<!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模板

标签:ext   3.3   操作   nload   引入   value   dom   logs   json   

原文地址:http://www.cnblogs.com/lylooooo/p/6879893.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!