DojoX中/移动/ _StoreMixin标签和儿童性

Question

DojoX中/移动/ _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"} 
    ] 
},]; 

我把这些数据放在dojo/store/Memory中，它是Observable（通过dojo/store/Observable）。

现在我有一个名为W.js的小部件，它有一个dojox/mobile/_StoreMixin mixin，并且我已将存储设置为具有上述数据的存储器存储。

你会有我能用labelProperty或childrenProperty做什么的例子吗？例如，我可以设置childrenProperty指向“项目”（即对象B的数组），然后用它做些什么？我搜索了几个例子，但没有找到具体的东西。

我想什么做的是也许有labelProperty设置为“内容”属性，所以我可以把它打印出来，并childrenProperty设置为“物品”这样我就可以打印出来也（如前所述）。

谢谢。

Answer 1

我在下面写了一个快速示例。这是一个简单的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 
    } 
}); 

});