我在使用knockout嵌套的observableArrays时遇到了一些麻烦。
我的数据如下:
var myData = {
Id: 123,
Name: "string here",
Categories: [
{
Id: 12,
Name: "Category Name",
Products: [
{
Id: 1,
Name: 'Product1 name',
SomethingElse: '...'
},
{
Id: 2,
Name: 'Product2 name',
SomethingElse: '...'
}
]
},{
// another category ...
}
]
}
我的ViewModel如下所示:
viewModel = function () {
var self = this;
this.Id = menueItem ? ko.observable(menueItem.Id) : ko.observable(0);
this.Name = menueItem ? ko.observable(menueItem.Name) : ko.observable();
this.Categories = menueItem ? ko.observableArray(menueItem.Categories) : ko.observableArray([]);
// ...
}
所以我的问题是,如何将每个Products
的{{1}}也转换为Category
。
产品中的属性不必是可观察的。在我的应用程序中,我必须添加和删除类别和产品。
答案 0 :(得分:3)
为类别创建视图模型&产品。 categoryViewModel
应包含添加产品的功能,而根视图模型应包含添加类别的功能:
viewModel = function () {
var self = this;
menuItem = menuItem || {
Id: 0,
Name: null,
Categories: []
};
this.Id = ko.observable(menueItem.Id);
this.Name = ko.observable(menueItem.Name);
this.Categories = ko.observableArray();
this.addCategory = function(category) {
self.Categories.push(new categoryViewModel(category));
}
// create category viewmodels and add them to this root viewmodel
for (var i = 0, l = menuItem.Categories.length; i < l; i++) {
self.addCategory(menuItem.Categories[i]);
}
// ...
}
categoryViewModel = function(categoryObj) {
var self = this;
categoryObj = categoryObj || {
Id: 0,
Name: null,
Products: [],
};
this.Id = ko.observable(categoryObj.Id);
this.Name = ko.observable(categoryObj.Name);
this.Products = ko.observableArray();
this.addProduct = function(product) {
self.Products.push(new productViewModel(product);
}
// create product viewmodels and add them to this category viewmodel
for (var i = 0, l = categoryObj.Products.length; i < l; i++) {
self.addCategory(categoryObj.Products[i]);
}
}
productViewModel = function(productObj) {
var self = this;
productObj = productObj || {
Id: 0,
Name: null,
SomethingElse: null,
};
this.Id = productObj.Id;
this.Name = productObj.Name;
this.SomethingElse = productObj.SomethingElse;
}
你将拥有:
viewmodel {
Id(),
Name(),
Categories() : [
categoryViewModel = {
Id(),
Name(),
Products(): [
productViewModel = {
Id,
Name,
SomethingElse
}
...
]
},
...
]
}