使用 Knockout JS 映射选项将 Observable 属性添加到映射的 Observable 数组

Question

我正在使用由 AJAX 调用和 Knockout 映射插件填充的 Knockout 可观察数组 (self.data) 在视图中绑定 table。目的是将 ViewModel 作为可重用组件。

我需要在 select table 行中添加一列。我想通过使用映射选项向 self.data 可观察数组中的每个项目添加一个布尔值 isSelected 可观察属性来做到这一点。然后 self.selectClicked 函数使用这个可观察的属性将项目推送或弹出到 self.selectedItems 可观察的数组。

问题是，我不太确定如何将 isSelected 属性添加到每个数组项。

目前的代码如下：

//// NOTE: ko.applyBindings and the AJAX call currently happen outside of this code.

function ViewModel() {

var self = this;

var mapping = {
    // Boolean observable property for each array item added here?
};

self.data = ko.observableArray([]);
self.selectedItems = ko.observableArray([]);

self.selectClicked = function (data, event) {

    if (event.currentTarget.checked) {
        self.selectedItems.push(data);                       
    }
    else {
        self.selectedItems.pop(data);
    }

    return true;
};

// AJAX Data is pushed to the self.data observable array through this function
self.addData = function (_data) {

    ko.mapping.fromJS(_data, mapping, self.data);

};
}

Answer 1

您可以手动创建数据对象并使用 create 添加 isSelected:

var mapping = 
{
    create: function(_data) {
        return new Data(_data.data);
    }
};

self.addData = function (_data) {
    ko.mapping.fromJS(_data, mapping, self.data);
};

var Data = function (data) {
    var self = this;

    ko.mapping.fromJS(data, {}, self);

    self.isSelected = ko.observable(false);
};

JsFiddle

这记录在 Knockout mapping plugin documentation。

使用 Knockout JS 映射选项将 Observable 属性添加到映射的 Observable 数组

Adding an Observable Property to a mapped Observable Array using Knockout JS Mapping Options

javascript

knockout-mapping-plugin

knockout.js

使用 Knockout JS 映射选项将 Observable 属性 添加到映射的 Observable 数组

Adding an Observable Property to a mapped Observable Array using Knockout JS Mapping Options

javascript

knockout-mapping-plugin

knockout.js

使用 Knockout JS 映射选项将 Observable 属性添加到映射的 Observable 数组