zoukankan      html  css  js  c++  java
  • 【Juicer】 一个高效、轻量的前端 (Javascript) 模板引擎

    引用地址:http://juicer.name/docs/docs_zh_cn.html

    * 一个完整的例子

    HTML 代码:
    
    <script id="tpl" type="text/template">
        <ul>
            {@each list as it,index}
                <li>${it.name} (index: ${index})</li>
            {@/each}
            {@each blah as it}
                <li>
                    num: ${it.num} <br />
                    {@if it.num==3}
                        {@each it.inner as it2}
                            ${it2.time} <br />
                        {@/each}
                    {@/if}
                </li>
            {@/each}
        </ul>
    </script>
    
    Javascript 代码:
    
    var data = {
        list: [
            {name:' guokai', show: true},
            {name:' benben', show: false},
            {name:' dierbaby', show: true}
        ],
        blah: [
            {num: 1},
            {num: 2},
            {num: 3, inner:[
                {'time': '15:00'},
                {'time': '16:00'},
                {'time': '17:00'},
                {'time': '18:00'}
            ]},
            {num: 4}
        ]
    };
    
    var tpl = document.getElementById('tpl').innerHTML;
    var html = juicer(tpl, data);
  • 相关阅读:
    4.9新随笔
    4.2上机作业
    3.30作业
    3.26上机练习
    作业十
    作业九
    作业八
    作业六
    作业五
    作业三
  • 原文地址:https://www.cnblogs.com/zhixi/p/5984887.html
Copyright © 2011-2022 走看看