首页 > 代码库 > underscore模板引擎的小例子
underscore模板引擎的小例子
_.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模板引擎的小例子
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。