码迷,mamicode.com
首页 > 其他好文 > 详细

underscore模板引擎的小例子

时间:2017-02-10 10:41:21      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:json   lob   dialog   ble   .ajax   function   build   javascrip   asc   

_.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>

 

underscore模板引擎的小例子

标签:json   lob   dialog   ble   .ajax   function   build   javascrip   asc   

原文地址:http://www.cnblogs.com/lchzlp/p/6385248.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!