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”,这样我也可以将它们打印出来(如前所述) )。
感谢。
答案 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
}
});
});