javascript - knockout 可观察数组。在多个 View 模型之间共享

Question

在多个 View 模型之间共享一个 knockout 的可观察数组时遇到了一些难题。

基本上，我有如下布局

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 中的 passenger 项目，但这种方法的问题是如果复选框在运输部分被选中，它也会在假期部分被选中，因为它使用相同的可观察数组。

有什么想法吗？？

编辑:

example fiddle

Answer 1

checked 绑定(bind)也适用于可观察数组。因此，您可以简单地绑定(bind)到 $parent.selectedPassengers 并将值属性指定为乘客 ID，如下所示:

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

在每个 View 模型中，您需要有一个 selectedPassengers 可观察数组用于绑定(bind)到复选框。添加函数应该如下所示:

function transport(pageVM) {
    ....
    this.selectedPassengers = ko.observableArray([]);    
    ....

    this.addTransport = function() {
        this.selectedItems.push({ 
            ....
            selectedPassengers: this.selectedPassengers()
        });
    };    
};

Working Fiddle