击倒可观测阵列.在多个视图模型之间共享

Knockout observable array. Shared between multiple view models

本文关键字：视图 模型 之间 共享 可观 阵列      更新时间：2023-09-26

在多个视图模型之间共享一个淘汰的可观察数组，这有点棘手。

基本上，我有一个布局如下

Transport
    ... textbox fields, etc
    Selected Passengers:
        <!-- ko foreach: allPassengers -->   
        <input type="checkbox" />
        <!-- /ko -->
    <button>Add Transport</button>
Holiday
    ... textbox fields, etc
    Selected Passengers:
        <!-- ko foreach: allPassengers -->   
        <input type="checkbox" />
        <!-- /ko -->
    <button>Add Holiday</button>

现在，每个部分的选定乘客都是从一个可观察的数组中生成的，想法是，如果乘客被删除/更改，一切都会自动就位。

所以像这个

function page() {
    // in actuality this passengers array is a computed observable obtained from the passengers section which is not shown here.
    this.allPassengers = ko.observableArray([
    {
        Id: 1,
        name = ko.observable('name'),
        checked = ko.observable(false)
    },
    {
     .
     .
    ]);
}
function transport() {
    // pageVM is a page object
    this.allPassengers = pageVM.allPassengers;
    this.transportItems = ko.observableArray();
    this.addTransport = function() {
        this.transportItems.push({
            .
            .
            selectedPassengers: [...]
            .
            .
        });
    };
}
function holiday() {
    // pageVM is a page object
    this.allPassengers = pageVM.allPassengers;
    this.holidayItems = ko.observableArray();
    this.addHoliday = function() {
        this.holidayItems.push({
            .
            .
            selectedPassengers: [...]
            .
            .
        });
    };
}

但是，当单击添加运输/假日时，我需要一种方法来确定选中了哪个复选框，这样我就可以添加所选的乘客。

我曾尝试将checked = ko.observable(false)属性添加到parent.allPassengers中的乘客项目，但这种方法的问题是，如果在运输部分选中复选框，它也会在假日部分选中，因为它使用的是相同的可观察数组。

有什么想法吗？？

编辑：

示例fiddle

检查的绑定也适用于可观察的数组。因此，您可以简单地绑定到$parent.selectedPassengers，并将value属性指定为乘客id，如下所示：

<input type="checkbox" data-bind="attr: { value: id },
                                  checked: $parent.selectedPassengers" />

在每个视图模型中，您需要有一个selectedPassengers可观察数组，用于绑定到复选框。添加函数应该是这样的：

function transport(pageVM) {
    ....
    this.selectedPassengers = ko.observableArray([]);    
    ....
    this.addTransport = function() {
        this.selectedItems.push({ 
            ....
            selectedPassengers: this.selectedPassengers()
        });
    };    
};

工作Fiddle

您可以使用ko.computed返回选定的乘客（这里有一个小提琴）：

var ViewModel = function () {
    this.allPassengers = ko.observableArray([
        { name: 'John', selected: ko.observable(false) },
        { name: 'Jane', selected: ko.observable(false) },
        { name: 'Mark', selected: ko.observable(false) }
    ]);
    this.selectedPassengers = ko.computed(function () {
        return ko.utils.arrayFilter(this.allPassengers(), function (item) {
            return item.selected();
        });
    }, this);
};
相关文章：