dojox / mobile / _StoreMixin标签和子属性

时间:2014-09-05 14:18:38

标签: javascript dojo

dojox / mobile / _StoreMixin有2个我很好奇的特性:

// labelProperty: String
// A property name (a property in the dojo/store item) that specifies that item's label.
labelProperty: "label"

// childrenProperty: String
// A property name (a property in the dojo/store item) that specifies that item's children.
childrenProperty: "children",

在这种情况下,我不太确定如何重复使用 访问这些属性:

我有一个对象数组A,其中每个对象A包含对象B的数组,所以像这样:

var data = [{
    id: "1",
    content: "some info",
    items: [
        {id:"a"},
        {id:"b"},
        {id:"c"},
        {id:"d"}
    ]
},{
    id: "2",
    content: "some info",
    items: [
        {id:"e"},
        {id:"f"},
        {id:"g"},
        {id:"h"}
    ]
},{
    id: "3",
    content: "some info",
    items: [
        {id:"i"},
        {id:"j"},
        {id:"k"},
        {id:"l"}
    ]
},{
    id: "4",
    content: "some info",
    items: [
        {id:"m"},
        {id:"n"},
        {id:"o"},
        {id:"p"}
    ]
},];

我把这些数据放在了observable的dojo / store / Memory中(通过dojo / store / Observable)。

现在我有一个名为W.js的小部件,它有一个dojox / mobile / _StoreMixin mixin,我将存储集设置到内存存储中,上面有数据。

您是否有任何关于我可以用labelProperty或childrenProperty做什么的例子?例如,我可以将childrenProperty设置为指向“items”(即对象B的数组),然后用它做一些事情吗?我搜索了几个例子,但实际上找不到任何具体的东西。

我想要做的是也许将labelProperty设置为“content”属性,这样我就可以打印出来并将childrenProperty设置为“items”,这样我也可以将它们打印出来(如前所述) )。

感谢。

1 个答案:

答案 0 :(得分:0)

我在下面写了一个简单的例子。它是一个简单的Widget,它扩展了dojox / mobile / _StoreMixin以使其能够存储。我没有实现onUpdate,onDelete,onAdd,但在那里留下了一些评论,可以用它们。可以在onComplete方法中引用labelProperty和childrenProperty的用法。

我的示例使用dijit / _Widget和dijit / _TemplatedMixin使其成为具有附加模板支持的标准dojo Widget。你可能没有临时支持。注意:我没有测试这个小部件,但它应该让你知道如何使用这两个字段。

define([
    "dojo/_base/declare",
    "dojo/_base/array",
    "dojo/_base/lang",
    "dojo/dom-construct",
    "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dojox/mobile/_StoreMixin"
], function(
    delare,
    array,
    lang,
    domConstruct,
    _Widget,
    _TemplateMixin,
    _StoreMixin
) {

return declare("custom.W", _StoreMixin, {
    templateString: "<div data-dojo-attach-point='containerNode'></div>",

    labelProperty: 'content',
    childrenProperty: 'items',

    onComplete: function(items) {
        // loop through all the items and create individual div to display them
        array.forEach(items, lang.hitch(this, function(item) {
            // create the main div to show the label
            var labelNode = domConstruct.create('div', {
                // use the labelProperty here to pull the correct label property defined
                innerHTML: item[this.labelProperty]
            }, this.containerNode);

            // create an unorder list of all the items displaying its id
            var ulNode = domConstruct.create('ul', {}, labelNode);
            // use the childrenProperty here to find if this item has any children
            if(lang.isArray(item[this.childrenProperty])) {
                array.forEach(item[this.childrenProperty], lang.hitch(function(child) {
                    domConstruct.create('li', {
                        innerHTML: id
                    }, ulNode);
                }, this));
            }
        }));
    },

    onUpdate: function(item, insertedInto) {
        // locate the corresponding labelNode for this item and update the label

        // locate the corresponding ulNode for this item and add/remove any li that no longer exists in the children property
    },

    onDelete: function(item, removedFrom) {
        // locate the corresponding labelNode for this item and delete it

        // locate the corresponding ulNode for this item and delete it along with any of its children
    },

    onAdd: function(item, insertedInto) {
        // locate the labelNode at the given insertedInto index and add a new labelNode with the label for this item

        // create an unorder list of all the items displaying its id
    }
});

});