首页 文章

使用Knockout JS Mapping Options将Observable属性添加到映射的Observable Array

提问于
浏览
0

我使用Knockout可观察数组( self.data )绑定视图中的表,该数组由AJAX调用和Knockout Mapping插件填充 . 目的是将ViewModel作为可重用的组件 .

我需要添加一列来选择表行 . 我想通过使用映射选项向 self.data observable数组中的每个项添加一个布尔 isSelected observable属性来实现此目的 . 然后, 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);

};
}

1 回答

  • 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中有记录 .

相关问题