js模板引擎

来源：互联网发布：java中设计模式详解编辑：程序博客网时间：2024/05/29 03:52

使用模板的优点：“嵌入式”，可以将js直接写在模板里面，从而实现一些复杂的渲染逻辑；
baiduTemplate(百度) http://baidufe.github.io/BaiduTemplate/
artTemplate（腾讯）https://github.com/aui/artTemplate
juicer（淘宝）http://juicer.name/

引用js

<script src="template.js"></script>

添加模板的区域

<div id="father"></div>

建立模板

<script type="text/html" id="template">    {{name}}    {{=age}}    {{=sex}}</script>

渲染数据至指定区域

<script language="JavaScript">    var user = {        name:"jane",        age:25,        sex:"女"    };    document.getElementById('father').innerHTML += template('template',user);</script>

辅助函数：

<script type="text/html" id="help">        {{add(number)}}    </script>    <script language="JavaScript">        template.helper("add",function (number) {            return number-1;        });        var data = {number:100}        document.getElementById('father').innerHTML += template('help',data);    </script>

each

<script id="test" type="text/html">{{if isAdmin}}<h1>{{title}}</h1><ul>    {{each list as value i}}    <li>索引 {{i + 1}} ：{{value}}</li>    {{/each}}</ul>{{/if}}</script><script>    var data = {        title: '基本例子',        isAdmin: true,        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']    };    var html = template('test', data);    document.getElementById('father').innerHTML += html;</script>

0 0