4

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

基本上，我的布局如下

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

有任何想法吗？？

编辑：

示例小提琴

4

2 回答 2

4

已检查的绑定也适用于可观察数组。因此，您可以简单地绑定到$parent.selectedPassengersvalue 属性并将其指定为乘客 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()
        });
    };    
};

工作小提琴

于 2013-07-02T19:08:39.027 回答
0

您可以使用 ako.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);
};
于 2013-07-02T19:23:22.473 回答