underscore模板引擎的小例子

Posted 2020-08-30

_.template(templateString, [data], [settings])

这是template方法的api，可接受三个参数，其中：

第一个参数也是必须的参数是模版字符串，你可以通过<%=  %> 来插入变量，还可以通过<%  %>来插入js代码，也可以通过<%-  %>来进行html转义，如果变量很多，可以使用<% print() %>来简化。

第二个参数是传入模版的数据，如果不传第二个参数，那么这个方法会返回一个模版函数，这个模版函数可以穿入数据返回完成的模版，如果传入data参数则会直接返回一个已完成的模版。

第三个参数是设置，比如这个方法默认是寻找<%  %>来进行替换。

 

1.模板文件（tbody.html）

 1         <table class="ui-zx-table" width="100%" class="ms-controller" ms-controller="vmChannelAllocateEdit">
 2              <thead>
 3                 <tr>
 4                    <th width="10%">省份</th>
 5                    <th width="90%" colspan="2">渠道</th>
 6                 </tr>
 7              </thead>
 8               
 9              <tbody >
10                <%_.each(data,function(n){%>
11                  <tr>
12                       <td rowspan="2"><%=n.province%></td>
13                        
14                       <td style="border-bottom:1px dashed;text-align:left;width:100%" class="vidone">全国渠道：
15                           <%_.each(n.qgchannel,function(m){%>
16                               <span class="spank">
17                               <%=m%>
18                               </span>
19                           <% }); %>
20                       </td>
21                       <td rowspan="2" style="width:7%">
22                             <a href="javascript:;" ms-on-click="edit(‘<%=n.provid%>‘)">管理</a>
23                       </td>
24                  </tr>
25                  <tr>
26                        <td style="text-align:left;">省份渠道：
27                            <%_.each(n.provchannel,function(i){%>
28                                <span class="spank" >
29                                <%=i%>
30                                </span>
31                            <% }); %>
32                        </td>
33                  </tr>
34                   <% }); %>
35             </tbody>
36         </table> 
37 
38                

2.js文件

define([‘global_ref‘,
        ‘module/menuView/channelAllocate/channelAllocate.html‘, 
    ],
    function(g, viewHTML,viewEditHTML) {
        var svMap = g.svMap,
            $ = g.$,
            avalon = g.avalon,
            ajax = g.ajax,
            sessionMap = g.sessionMap,
            pager = g.pager,
            dialog = g.dialog;
        //数据接口 
        svMap.add(‘qryChannelprovList‘, ‘‘, ‘api/qryChannelprovList‘); 
       
        
        var config = require(‘assets/common/province‘);
        var provNameMap = {};
        avalon.each(config.provinceWidthCode,function(idx,item){
            provNameMap[item.code] = item.name;
        });
      
     /**********模板解析用到的部分********/
        var tbody = require(‘module/menuView/channelAllocate/tbody.html‘);
        var buildEditHTML =  _.template(tbody);
     /******************/
        var vmChannelAllocateMain = avalon.define({
            $id: ‘vmChannelAllocateMain‘,
            //html1:‘‘,
            content:‘‘,
            json:[],
            provid:‘‘,
            qgchannel:[],
            provchannel:[],
            display:function(){
           	 ajax.postJson(svMap.get("qryChannelprovList"), ‘‘,
                function(json, state) {
                    if (state) { 
       /**********模板解析用到的部分********/            
	vmChannelAllocateMain.content=buildEditHTML({data:json.beans});
       /******************/
                    } else {
                        alert(json.returnMessage);
                    }
                });

           },
        });
        // 定义视图模块
        var viewmod = {
            viewtSrc: viewHTML,
            viewInit: function(name) { //模块view加载完成后的回调方法，在刷新（F5）时可能调用两次
            	vmChannelAllocateMain.display();
            },
            viewDestroy: function() { //切换菜单时销毁原来的view
                 vmChannelAllocateEdit.channelC=[];
                 vmChannelAllocateEdit.channelP=[];
            }
        };
        return viewmod;
    })

　3.HTML部分（解析后的模板需插入到该HTML文件）

<div class="ms-controller" ms-controller="vmChannelAllocateMain">
    <div class="ui-tablewidth mt-10">
        {{content|html}}
    </div>
    <div>  </div>
</div>