Knockoutjs嵌套了observableArrays

时间:2014-09-11 10:11:14

标签: javascript json knockout.js

我在使用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。 产品中的属性不必是可观察的。在我的应用程序中,我必须添加和删除类别和产品。

1 个答案:

答案 0 :(得分:3)

为类别创建视图模型&产品。 categoryViewModel应包含添加产品的功能,而根视图模型应包含添加类别的功能:

Root viewmodel:

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]);
    }
     // ...
}

类别viewmodel:

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
                }
                ...
            ]
        },
        ...
    ]
}