Knockoutjs嵌套的observableArrays [英] Knockoutjs nested observableArrays

问题描述

我在敲除嵌套的observableArrays时遇到了一些麻烦.

I have some trouble with knockout nested 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看起来像这样:

My ViewModel looks like this:

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

所以我的问题是，如何同时将每个Category的Products转换为observableArray. 产品中的属性不必是可观察的.在我的应用程序中，我必须添加和删除类别和产品.

So my question is, how get the Products of each Category also to an observableArray. The properties in Products not have to be observable. In my Application I have to add and remove Categories and Products.

推荐答案

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

Create viewmodels for categories & products. categoryViewModel should contain a function to add products and the root viewmodel should contain a function to add categories:

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

这篇关于Knockoutjs嵌套的observableArrays的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！