2

選択した値の配列にすべてバインドされた一連のチェック ボックスがあります。

var myModel = {
   // ...
   workgroupsImpacted: ko.observableArray([])
};

上部には、[すべて選択]チェック ボックスがあります。[すべて選択] チェック ボックスがオンになっている場合は、次のコードを実行します。

var subGroups = $('#WorkgroupCB_' + parentId);
$(':input', subGroups).prop('checked', this.checked);

これにより、対応するチェックボックス コントロールがオン (またはオフ) になります。これは UI に関してはうまく機能しますが、バインドされたモデルは更新されません。つまり、workgroupsImpacted空のままです。

多数のチェックボックスをオンまたはオフにしたときにモデルを更新する簡単な方法はありますか? または、各チェック ボックスをループして値を掘り下げ、モデルの配列にその値を手動で追加または削除する必要がありますか? Knockout.js がこれを簡単に行うための標準メカニズムを提供することを願っています。

4

4 に答える 4

2

ではKnockoutJS、observable arrayは配列内のアイテムの量を追跡し、変更 (つまり、アイテムの追加/削除) を追跡しますが、その配列内のオブジェクトの状態を追跡しません。

observable arrayofが必要なようですねobservables。checkboxリスト内のそれぞれを表すモデル オブジェクトはありますか?

内のチェックボックスの追跡を示すフィドルを次に示しますobservable array。

于 2013-07-09T20:16:21.733 に答える
1

モデル内のアイテムのリストを維持する必要がないことを理解しています。Knockout でこの状況に対処することはまだ可能であり、その方法はカスタム バインディングを使用することです。

これは私がまとめたもので、これを使用してチェックボックスを更新しますclick(これは Knockout が監視しているためです)。「すべてチェック」チェックボックスが最新であることを確認するために、配列への変更を監視し (update関数内でアクセスするだけで)、チェックされていないチェックボックスを探します。

ko.bindingHandlers.allChecked = {
    init: function(element, valueAccessor) {
        $(element).click(function() {
            $(valueAccessor().selector)
                .filter(element.checked ? ':not(:checked)' : ':checked')
                .click();
        });
    },
    update: function(element, valueAccessor) {
        var value = valueAccessor(),
            watch = ko.unwrap(value.watch),
            unchecked = $(value.selector).filter(':not(:checked)');
        element.checked = (unchecked.length === 0);
    }
};

次のようにチェックボックス入力要素にバインドします。

<input type="checkbox" data-bind="
    allChecked: {
        selector: '#checks input:checkbox', 
        watch: selectedItems}" />

jsFiddle: http://jsfiddle.net/mbest/nth7A/

于 2013-07-10T01:43:27.603 に答える
1

「すべてチェック」チェックボックスを表す書き込み可能な計算オブザーバブルを作成する必要があります。次に例を示します。

this.allItemsSelected = ko.computed({
    read: function() {
        return this.selectedItems().length === this.items().length;
    },
    write: function(value) {
        this.selectedItems(value ? this.items.slice(0) : [] );
    },
    owner: this
});

このjsFiddleを含む上記の例について詳しく説明する同様の質問への回答を書きました: http://jsfiddle.net/mbest/L3LeD/

書き込み関数で、選択した項目の配列に各項目のプロパティを入力する場合は、次のように使用できます。

this.selectedItems(value ?
    ko.utils.arrayMap(this.items(), function(item) { return item.property; }) :
    [] );
于 2013-07-09T20:52:39.850 に答える