JS template engine template engine uses -Mustache Example 1 - Form tree

Example Code

1.jsp Code

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<Title> District Management </ title>
<-! Tree control table ->
<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>
<! - Business 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 > zone name </ th> <th> region encoding the </ th> <th> area type </ th> <th> Remarks </ TH> <Shiro: the hasPermission name = " SYS: Area: Edit " > <TH> operation </ 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 the href = " $ {CTXA /sys/area/delete.do?id = {{}}} row.id " οnclick = " return confirmx ( 'in the region to be deleted items and all sub-regions do?', this. href) " > delete </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);
            }
        }
    }
————————————————
Disclaimer: This article is the original article CSDN bloggers "cl11992", and follow CC 4.0 BY- SA copyright agreement, reproduced, please attach the original source link and this statement.
Original link: HTTPS: // blog.csdn.net/cl11992/article/details/77052471

Mustache recent contact with the use of a template engine, found very easy to use, so I'm a little bit recording.
The mustache github Address: mustache

mustache usage is very simple, probably on the following three steps:

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

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

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

Well understood, is the mustache parse html string template by internal methods, then the data is rendered up to form a new html string, and finally you can put it into the dom page.

Here record some basic syntax:

Basic

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 traversal Syntax

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

This can be seen as if instead of grammar can be used through the data (corresponding to if (weather) {...})
with the proviso that: weather exists not as null, undefined, false, 0, '', []

data:

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

template:

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

output:

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

In contrast with the previous one, weather is false, null, undefined, [] , 0 display

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

Traverse the array of strings

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

data:

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

template:

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

output:

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

Use the function
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

Online explain: function here will be in the list in each iteration term of the current context of the call.
I understand that every function in every context when rendering decisions, so this point depends on the specific execution environment.
Here temp function is performed in the weather, so the function of this points to the weather

More complex functions
online examples:

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>

Did not look too much to understand, should be defined render rendered view method, it has been useless to the function.

There are other uses and other uses re-record it.

like
Collect
share it

JS template engine template engine uses -Mustache Example 1 - Form tree

Example Code

Guess you like