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>

これで、各セクションの選択された乗客が 1 つの観測可能な配列から生成されます。乗客が削除/変更された場合、すべてが自動的に適切な位置に収まるはずです。

だから、このようなもの

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

働くフィドル

于 2013-07-02T19:08:39.027 に答える