在Dojo中,如何创建与TabContainer共享相同结构的实用ContentPane?
我有静态的TabContainer和TabContainer内的所有ContentPanes应该从servlet获得的json数据动态地创建。所有的ContentPanes共享一个只有数据不同的模板。像:在Dojo中,如何创建与TabContainer共享相同结构的实用ContentPane?
[Tab A] Tab B Tab C
Name: Jerry
Age: 28
Birthday: 2.9
当点击选项卡B:
Tab A [Tab B] Tab C
Name: Michael
Age: 45
Birthday: 2.10
contentPane中的含量高于此示例要复杂得多,它的declaretively用HTML编写的,所以我不能promatically创建这样的:
var cp1 = new dijit.layout.ContentPane({
title:"New Question",
content:"<p>I am added promatically</p>",
});
dijit.byId("centerLayout").addChild(cp1);
那么,我怎样才能通过“模板”或Dojo中的某些概念来实现? 也许有一个更强的组件,我不知道可以将查询的数据绑定到所有这些重复的ContentPane。
任何示例代码是高度赞赏。
简单的模板使用lang.replace
根据的contentPane内容/模板的复杂性,一个简单的方法来做到这一点是使用一个简单的lang.replace
。比方说,你作出这样的名字/年龄/生日模板(如cai/personTpl.html
):
<dl>
<dt>Name</dt><dd>{name.firstname} {name.lastname}</dd>
<dt>Age</dt><dd>{age}</dd>
<dt>Birthday</dt><dd>{birthday}</dd>
</dl>
在JavaScript,然后你可以这样做:
require([..other deps.., 'dojo/_base/lang', 'dojo/text!cai/personTpl.html'],
function(..other deps.., lang, personTpl) {
//.. your other code ..
// assuming person[i] is something like:
// {name: {firstname: 'A', lastname: 'B'}, age: 42..}
var cp1 = new dijit.layout.ContentPane({
title:"New Question",
content: lang.replace(personTpl, person[i]),
});
dijit.byId("centerLayout").addChild(cp1);
}
);//~require
更多道场/ _base /郎::与此字典替换:使用自定义窗口小部件http://dojotoolkit.org/reference-guide/1.8/dojo/_base/lang.html#dojo-base-lang-replace
更复杂的模板
如果每个选项卡中使用的模板比较复杂,例如有自己的小部件,使用事件等,你最好写一个自定义小部件(而不是使用ContentPane)。
例如,模板可以是这样的(cai/widgets/personTpl.html
):
<dl>
<dt>Name</dt><dd data-dojo-attach-point='nameNode'></dd>
<dt>Age</dt><dd data-dojo-attach-point='ageNode'></dd>
<dt>Birthday</dt><dd>
<input type='text' data-dojo-type='dijit/form/DateTextBox'
data-dojo-attach-point='bdayInput' />
</dd>
</dl>
而且部件可以(cai/widgets/Person.js
):
define([ ..other deps.., "dojo/text!cai/widgets/personTpl.html"],
function(..other deps.., personTpl) {
return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: personTpl,
name: "unknown",
_setNameAttr: { node: "nameNode", type: "innerHTML" },
age: 0,
_setAgeAttr: { node: "ageNode", type: "innerHTML" },
birthday: new Date(),
_setBirthdayAttr: function(bday) {
this.bdayInput.set("value", bday);
this._set("birthday", bday);
}
}); //~declare
}
); //~define
然后,您可以添加的联系人小部件的实例TabContainer:
require([..other deps.., "cai/widgets/Person"],
function(..other deps.., Person) {
//.. your other code ..
// assuming person[i] is something like:
// {name: "Jerry", age: 42, birthday: new Date(), title: "JerryTab"}
var p = new Person(person[i]);
dijit.byId("centerLayout").addChild(p);
}
);//~require
更多关于widg ets(以及具有映射到节点的属性的小部件):http://dojotoolkit.org/reference-guide/1.8/quickstart/writingWidgets.html#mapping-widget-attributes-to-domnode-attributes
感谢您的回复,我会检查您附加的链接,并要求您提供进一步的问题(如果有)。 – JerryCai 2013-02-20 09:28:38