使用挖空 JS 映射选项将可观察属性添加到映射的可观察数组

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

本文关键字：观察 映射 属性 数组 添加 JS 选项      更新时间：2023-09-26

我正在使用一个由AJAX调用和挖空映射插件填充的Knockout可观察数组（self.data）在视图中绑定一个表。目的是将视图模型作为可重用的组件。

我需要添加一列来选择表格行。 我想通过使用映射选项向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);
};
}

您可以使用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);
};

小提琴

这记录在挖空映射插件文档中。

相关文章：