将嵌套的 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

一种解决方案是再定义一个构造函数来包装 attributes 数组的每一项。在此函数中，您可以将 attributeValues 数组定义为可观察的，如下例所示：

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); });