此代码以手风琴样式生成子数组的长度
require(["dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dojo/domReady!"],
function(AccordionContainer, ContentPane){
var aContainer = new AccordionContainer({style:"height: 300px"}, "markup");
len = dataArray.length;
for ( var i =0; i<len; i++);
{
aContainer.addChild(new ContentPane({
title:dataArray[i].title,
content: dataArray[i].content
}));
}
aContainer.startup();
});
我正在尝试填充每个孩子的内容部分。例如,假设我有一个要添加到内容区域的10件事列表。我如何用该列表填充内容区域(考虑for循环,但不确定如何实现),还可能在列表中的每个项目旁边添加一个复选框,然后在末尾添加一个按钮。例如,假设内容窗格的标题为Cars。单击“汽车”后,将以手风琴样式显示一个汽车模型列表,旁边有一个复选框。选择特定汽车后,将在内容区域的底部单击“购买”按钮。我是Dojo的新手。坚持了一段时间。任何帮助将不胜感激。
最佳答案
因此,如果我理解得很好,您是否想动态填充单个ContentPane
的内容?还是要动态创建ContentPane
(如Miriam的答案所描述)。
如果您有兴趣向内容窗格中动态添加复选框并向其中添加按钮,那么最好的办法就是创建自己的窗口小部件并使用存储来表示数据。
例如:
var FacetPane = declare("dijit/layout/FacetPane", [ ContentPane ], {
store: null,
labelAttr: 'name',
_setStoreAttr: function(store) {
this.store = store;
this.update();
},
_getStoreAttr: function() {
return this.store;
},
postCreate: function() {
this.inherited(arguments);
this.itemNode = domConstruct.create("div", {
class: "itemNode"
}, this.domNode);
this.update();
},
_destroyItems: function() {
if (this.itemNode) {
console.log("Destroying items");
arr.forEach(registry.findWidgets(this.itemNode), function(item) {
console.log("Destroy item : " + item.id);
item.destroy();
});
}
},
update: function() {
if (this.store) {
this._destroyItems();
this.store.query({}).forEach(lang.hitch(this, this._updateRecord));
}
new Button({
label: "Buy"
}, domConstruct.create("button", null, this.itemNode));
},
_updateRecord: function(item) {
var row = domConstruct.create("div", {
class: "rowNode"
}, this.itemNode);
new CheckBox({
label: item[this.labelAttr]
}, domConstruct.create("input", null, row));
domConstruct.create("label", {
innerHTML: item[this.labelAttr]
}, row);
}
});
我知道,这可能看起来像很多代码,但是发生的事情很容易。我创建了一个名为
FacetPane
的假发,该假发从ContentPane
继承而来。这个新模块具有两个属性:store:包含应“转换”为复选框的项目的商店
labelAttr:商店中每个元素的属性,应将其用作复选框的标签
然后,我重写
postCreate()
函数,并告诉它创建一个额外的子DOMnode,其中将包含我们的商品,然后,我将根据商店内的商品(您可以在update()
中找到)对它进行更新。对于商店(
_updateRecord()
)中的每个项目,我添加一个包含复选框和标签的新行节点。该解决方案可能可以进行很多改进,但这应该使您对如何创建此类小部件有一个基本的了解。基本思想是为模型数据提供一个存储,并根据存储值动态创建DOM节点和窗口小部件。
可以在JSFiddle上找到完整的示例:http://jsfiddle.net/LaLNH/
关于javascript - 填充Dojo Accordion 容器,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24502953/