注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

dijit中_TemplatedMixin中parse的时机  

2014-03-30 11:15:22|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在写dijit widget时,我们经常会使用_TemplatedMixin快速创建widget的dom结构,但有时候我们需要在模板中混入其他widget,这时候什么时候parse,就显得很重要了。
举个例子
template (将dijit/TitlePane混入模板中)

<div>
<div id="${id}_TitlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="open:true">
<div data-dojo-attach-point="gridNode" id="${id}_grid"></div>
</div>
</div>

当页面ready时, parse

define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/template.html",

"gridx/core/model/cache/Sync",
"gridx/Grid",
"gridx/modules/SingleSort",
"gridx/modules/extendedSelect/Row",
"gridx/modules/filter/QuickFilter",
"gridx/modules/filter/Filter",
"gridx/modules/Bar",
"dijit/TitlePane",
"dojo/parser",
"dojo/ready"
], function(declare,_WidgetBase, _TemplatedMixin, template, Cache, Grid, SingleSort, Row, QuickFilter, Filter, Bar, TitlePane, parser, ready){

var grid = declare("test/TitleGrid", [_WidgetBase, _TemplatedMixin], {

templateString: template,

postCreate: function(){
this.inherited(arguments);
var t = this;

var grid = new Grid({
id: this.gridNode.id + "_grid",
cacheClass: Cache,
pageSize: 40,
store: this.store,
autoWidth: true,
structure: this.struct,
modules: [
SingleSort,
{
moduleClass: Row,
multiple: true,
triggerOnCell: true
},
QuickFilter,
Filter,
Bar
]
});

grid.placeAt(this.gridNode.id);
grid.startup();

this.grid = grid;
},

destroy: function(){
this.pane.destroy();
this.grid.destroy();
this.inherited(arguments);
}

});
//页面dom Ready后,再parse,但是这样你不能第一时间拿到TitlePane实例
ready(function(){
  parser.parse();

});

return grid;
});

当template ready时, parse
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/text!./templates/template.html",
"gridx/core/model/cache/Sync",
"gridx/Grid",
"gridx/modules/SingleSort",
"gridx/modules/extendedSelect/Row",
"gridx/modules/filter/QuickFilter",
"gridx/modules/filter/Filter",
"gridx/modules/Bar",
"dijit/TitlePane",
"dojo/parser",
"dojo/ready"
], function(declare,_WidgetBase, _TemplatedMixin, template, Cache, Grid, SingleSort, Row, QuickFilter, Filter, Bar, TitlePane, parser, ready){

var grid = declare("test/TitleGrid", [_WidgetBase, _TemplatedMixin], {

templateString: template,

postCreate: function(){
this.inherited(arguments);
var t = this;

var grid = new Grid({
id: this.gridNode.id + "_grid",
cacheClass: Cache,
pageSize: 40,
store: this.store,
autoWidth: true,
structure: this.struct,
modules: [
SingleSort,
{
moduleClass: Row,
multiple: true,
triggerOnCell: true
},
QuickFilter,
Filter,
Bar
]
});

grid.placeAt(this.gridNode.id);
grid.startup();

this.grid = grid;
//当模板domNode ready时,在parse, 拿到TitlePane实例
parser.parse(t.domNode).then(function(instances){
t.pane = instances[0];
});

},

destroy: function(){
this.pane.destroy();
this.grid.destroy();
this.inherited(arguments);
}

});

return grid;
});


总结:
1.可以在页面dom ready时parse,但是不能第一时间拿到想要模板中widget的实例。
2.当然也可以在模板节点ready时,parse,这样不但可以直接访问widget实例,也可以防止与页面配置的parseOnLoad=true冲突。
3.可以直接使用 dijit._WidgetsInTemplateMixin, 但是它不支持layout widget
  评论这张
 
阅读(392)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017