此代码以手风琴样式生成子数组的长度

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/

10-12 12:45
查看更多