JS模板引擎-Mustache模板引擎使用实例1-表格树

使用实例代码

1.jsp代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>地区管理</title>
<!-- 表格树控件 -->
<link href="${ctxStatic}/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css" />
<script src="${ctxStatic}/treeTable/jquery.treeTable.min.js" type="text/javascript"></script>
<!-- Mustache -->
<script src="${ctxStatic}/common/mustache.min.js" type="text/javascript"></script>
<!-- 业务js -->
<script src="${ctx}/views/admin/logistics/logisticsAreaList.js" type="text/javascript"></script>
</head>
<body>
    <table id="treeTable" class="table table-striped table-bordered table-condensed">
        <thead><tr><th>区域名称</th><th>区域编码</th><th>区域类型</th><th>备注</th><shiro:hasPermission name="sys:area:edit"><th>操作</th></shiro:hasPermission></tr></thead>
        <tbody id="treeTableList"></tbody>
    </table>
    <script type="text/template" id="treeTableTpl">
        <tr id="{{row.id}}" pId="{{pid}}">
            <td><a href="${ctxa}/sys/area/form.do?id={{row.id}}">{{row.name}}</a></td>
            <td>{{row.code}}</td>
            <td>{{dict.type}}</td>
            <td>{{row.remarks}}</td>
            <shiro:hasPermission name="sys:area:edit"><td>
                <a href="${ctxa}/sys/area/form.do?id={{row.id}}">修改</a>
                <a href="${ctxa}/sys/area/delete.do?id={{row.id}}" οnclick="return confirmx('要删除该区域及所有子区域项吗？', this.href)">删除</a>
                <a href="${ctxa}/sys/area/form.do?parent.id={{row.id}}">添加下级区域</a> 
            </td></shiro:hasPermission>
        </tr>
    </script>
</body>
</html>

2.logisticsAreaList.js

$(document).ready(function() {
        var tpl = $("#treeTableTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
        var data = ${fns:toJson(list)}, rootId = "0";
        addRow("#treeTableList", tpl, data, rootId, true);
        $("#treeTable").treeTable({expandLevel : 5});
    });
    function addRow(list, tpl, data, pid, root){
        for (var i=0; i<data.length; i++){
            var row = data[i];
            if ((${fns:jsGetVal('row.parentId')}) == pid){
                $(list).append(Mustache.render(tpl, {
                    dict: {
                        type: getDictLabel(${fns:toJson(fns:getDictList('sys_area_type'))}, row.type)
                    }, pid: (root?0:pid), row: row
                }));
                addRow(list, tpl, data, row.id);
            }
        }
    }
————————————————
版权声明：本文为CSDN博主「cl11992」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/cl11992/article/details/77052471

最近接触使用了 Mustache 模板引擎，发现非常好用，故稍微记录一下我。
mustache的github地址：mustache

mustache用法很简单，大概就以下三步：

1. 拿到渲染模板
var template = $('#tmpl').html();

2. 将数据渲染到模板上
Mustache.render(template, data);

3. 将渲染后的模板放到想放的dom中
$dom.html(template)

很好理解，就是mustache通过内部方法解析html字符串模板，然后将数据渲染上去形成新的html字符串，最后你就可以把它放入页面dom中。

这里记录一些基本语法：

基本

data:

{
    "name": "Chris",
    "company": "<b>GitHub</b>"
}

template

*  {{name}}     {{可以理解为这里面放的是键名}}
*  {{age}}
*  {{company}}
*  {{{company}}}  默认情况下，所有变量都是HTML转义的。如果要渲染未转义的HTML，使用三重括号：{{{}}}
*  {{&company}}   可以使用 ＆ 来取消转义。
  
*  {{=<% %>=}}  不解析输出
   {{company}}
   <%={{ }}=%>

output

* Chris
*         （因为不存在 age, 所以这里啥也没有）
* &lt;b&gt;GitHub&lt;/b&gt;
* <b>GitHub</b>
* <b>GitHub</b>
* {{company}}

if 遍历语法

{{ #weather }}
    {{ city }}
{{ /weather }}

这可以看做代替了 if 语法，可以用来遍历数据（相当于 if ( weather ) {…} ）
条件是：weather 存在且不为 null, undefined, false, 0, ‘’, []

data:

var data = {
    weather: [
        {
            city: '四川',
            sky: '多云'
        },
        {
            city: '河南',
           sky: '晴'
        }
}

template:

<div>
    查看城市天气:
    {{#weather}}
        {{city}}:{{sky}}<br/>
    {{/weather}}   
</div>

output:

查看城市天气：
        四川：所云
        河南：晴

与上一个相反，weather为 false, null, undefined, [], 0 显示

{{ ^weather }}
    显示无数据
{{ /weather }}

遍历字符串数组

{{ #cities }}
    {{ . }}
{{ /cities }}

data:

var data = {
    cities: ['北京','南京','上海','广东','深圳','西安']
}

template:

<div>
    查看其他城市:
    {{#cities}}
        <a href="javascript:;"> {{.}} </a>
    {{/cities}}   
</div>

output:

 查看其他城市: 北京 南京 上海 广东 深圳 西安

使用函数
data:

{
     weather: {
         city: '四川',
         weather: '<b>多云</b>',
         min_tempe: 20,
         max_tempe: 30
     }   
     tempe: function() {
         return this.min_tempe + '~' + this.max_tempe;
     }
}

template:

{{#weather}}
    {{tempe}}
{{/weather}}

output:

20 ~ 30

网上解释：这里的 function 将在每次迭代时在列表中的当前项的上下文中调用。
我理解的就是 function每次的上下文都要在渲染时才决定，因此 this 的指向要看具体的执行环境。
这里 temp函数是在 weather中执行的，所以function中的this指向的是 weather

比较复杂的函数
网上的例子：

If the value of a section key is a function, it is called with 
the section’s literal block of text, un-rendered, as its first argument. 
The second argument is a special rendering function that uses the current 
view as its view argument. It is called in the context of the current view
object.

data:

{
  "name": "Tater",
  "bold": function () {
    return function (text, render) {
      return "<b>" + render(text) + "</b>";
    }
  }
}

template:

{{#bold}}Hi {{name}}.{{/bold}}

output:

<b>Hi Tater.</b>

没看太懂，应该是在函数中定义render渲染视图方法，至今也没用到过。

还有其他的用法等用到了再记录吧。

JS模板引擎-Mustache模板引擎使用实例1-表格树

使用实例代码

猜你喜欢