Question

此代码以手风琴式

生成子项的数组长度

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循环但只是不确定如何实现它），还可能在列表中的每个项目旁边添加一个复选框，然后在末尾添加一个按钮。例如，让我们假设contentpane的标题是Cars。点击汽车后，汽车模型列表将以手风琴风格显示，旁边有一个复选框。一旦选择了特定的汽车，“购买”按钮将位于要点击的内容区域的底部。我是Dojo的新手。被困在这一段时间了。任何帮助将不胜感激。

Answer 1

看看我的小提琴。这是一种如何使用您选择的多个ContentPanes自动填充AccordianContainer的方法。此示例中的数字属于存储在数组中的项目。

http://jsfiddle.net/6kcSr/

 array.forEach(DataArray, function (cars, i) {

    aContainer.addChild(new ContentPane({
        title: cars,
        content: "<input id='mycheck"+i+"' name='mycheck' data-dojo-type='dijit/form/CheckBox' checked /><label for='mycheck'>I agree</label> to try a " +cars
    }));
});

此致，Miriam

Answer 2

因此，如果我理解得很好，您想要动态填充单个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的wiget，它继承自ContentPane。这个新模块有两个属性：

store：包含应该＆＃34;转换的商品的商店＆＃34;复选框
labelAttr：商店中每个元素的属性，应该用作复选框的标签

然后我覆盖postCreate()函数并告诉它创建一个包含我们项目的额外子DOMnode，之后我根据商店内的项目更新它（你可以在{{ 1}}）功能。

对于商店中的每个商品（update()），我添加了一个包含复选框和标签的新行节点。

这个解决方案可能会有很多改进，但是这应该可以让您基本了解如何创建这样的小部件。基本思想是为您的模型数据创建一个商店，并根据商店值动态创建DOM节点和小部件。

可以在JSFiddle上找到完整的示例：http://jsfiddle.net/LaLNH/

填充Dojo AccordionContainer

2 个答案: