将嵌套的JSON数据映射到Knockout observableArray

Question

我们在Knockout中有一个observableArray，它包含几个JSON对象。 在每个JSON对象下，我们有一个需要可观察的嵌套数组。

Knockout无法在observableArray中观察嵌套在每个JSON对象中的数组。

是否可以映射已嵌套在observableArray中的数组？

以下是observableArray中一个JSON对象的示例 。

注意：我们需要使“attributeValues”数组可观察。

{
    "attribute": {
        "id": 6,
        "name": "Some attribute name",
        "typeID": 5
    },
    "type": {
        "id": 5,
        "typeName": "list"
    },
    "attributeValues": [{
        "id": 10,
        "attributeID": 6,
        "value": "Some attribute value",
        "chosen": false
    }, {
        "id": 11,
        "attributeID": 6,
        "value": "Another attribute value",
        "chosen": false
    }, {
        "id": 12,
        "attributeID": 6,
        "value": "Third attribute value",
        "chosen": false
    }]
}

这是我们现在使用的代码：

$.ajax({
    type: 'GET',
    url: '/JsonService',
    success: function (data) {
        avm.attributes(data.allAttributes);
    },
    dataType: 'json',
    traditional: true
});

function attributeViewModel() {
    var self = this;

    self.attributes = ko.observableArray([]);
}

var avm = new attributeViewModel();
ko.applyBindings(avm);

Answer 1

一种解决方案是定义一个或多个构造函数来包装属性数组的每个项目。 在此函数中，您可以将attributeValues数组定义为observable，如以下示例所示：

function AttributeValueViewModel (data) {
    var self = this;
    self.attribute = ko.observable(data.attribute);
    self.type = ko.observable(data.type);
    self.attributeValues = ko.observableArray(data.attributeValues);
}

function attributeViewModel() {
    var self = this;
    self.attributes = ko.observableArray([]);
    self.addList = function (list) {
        ko.utils.arrayForEach(list, function(item) {
            self.attributes.push(new AttributeValueViewModel(item));
        });
    };
}

var avm = new attributeViewModel();
ko.applyBindings(avm);
$.getJSON('url', function (list) { avm.addList(list); });