使用 artTemplate模板

時間 2019-11-29

標籤使用 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>

相關標籤/搜索