Question

在多个视图模型中共享一个淘汰可观察数组时遇到了一些难题。

基本上，我的布局如下

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

任何想法??

编辑：

example fiddle

Answer 1

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

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

在每个视图模型中，您需要使用selectedPassengers可观察数组来绑定复选框。 add函数应如下所示：

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

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

Working Fiddle

Answer 2

您可以使用ko.computed返回所选乘客（and here's a fiddle）：

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);
};

Knockout可观察数组。在多个视图模型之间共享

2 个答案: