將嵌套的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); });