0

アプリケーションコードで経験していることを大まかに説明するjsfiddleがあります。（後世のために、実際のフィドルコードを以下に投稿します。）

基本的に、チェックボックス オプションのリストを設定するために使用されている監視可能な配列が 1 つあります。オプションの 1 つを選択すると、選択された項目だけで構成される別の監視可能な配列にその項目が追加されます。

フォームに何らかのエラーがある場合 (または、既存のデータを編集していると思われます)、選択された監視可能な配列には、以前に選択された項目が最初から入力されます。ただし、現在、元のアイテムと選択されたアイテムの間に接続がないため、チェックボックスのいずれかをオンまたはオフにすると、重複が追加され、その重複が削除されるだけです。

私の質問は、1）これについて完全に間違っているのでしょうか（つまり、この問題を引き起こさないより良い方法はありますか）、2）そうでない場合、アイテム間の接続を復元する最良の方法は何ですか。チェックボックスはアイテムがそこにあることを示し、チェックを外すとアイテムが削除されますか?

HTML

<ul data-bind="foreach: Fruit">
    <li>
        <label>
            <input type="checkbox" class="cbFruit" data-bind="checked: Selected, attr: { value: Name }" />
            <span data-bind="text: Name"></span>
        </label>
    </li>
</ul>

<ul data-bind="foreach: SelectedFruit">
    <li data-bind="text: Name"></li>
</ul>

JS

var FruitViewModel = function (name) {
    var self = this;

    self.Name = ko.observable(name);
    self.Selected = ko.observable(false);

    return self;
};

var GroceryStoreViewModel = function () {
    var self = this;

    self.Fruit = ko.observableArray([
        new FruitViewModel('Apples'),
        new FruitViewModel('Oranges'),
        new FruitViewModel('Bananas'),
        new FruitViewModel('Pineapples')
    ]);

    self.SelectedFruit = ko.observableArray([
        new FruitViewModel('Oranges'),
        new FruitViewModel('Bananas')
    ]);

    return self;
};

$(document).ready(function () {
    var viewModel = GroceryStoreViewModel();
    ko.applyBindings(viewModel);

    $('.cbFruit').on('click', function () {
        var fruit = ko.dataFor(this);
        if (fruit.Selected()) {
            viewModel.SelectedFruit.push(fruit);
        } else {
            viewModel.SelectedFruit.remove(fruit);
        }
    });
});
4

1 に答える 1

0

別の監視可能な配列（および別の投稿リスト）を単に捨てることで問題を解決しました。代わりに、両方の用途に同じ完全なリストをforeach使用し、2 番目の用途では Knockout 仮想if要素を使用して、選択したもののみを表示します。

HTML

<ul data-bind="foreach: Fruit">
    <li>
        <label>
            <input type="checkbox" class="cbFruit" data-bind="checked: Selected, attr: { value: Name }" />
            <span data-bind="text: Name"></span>
        </label>
    </li>
</ul>

<ul data-bind="foreach: Fruit">
    <!-- ko if: Selected -->
    <li data-bind="text: Name"></li>
    <!-- /ko -->
</ul>

2 番目のリストのデータは最初のリストに投稿されるため、ビューが再度表示された場合にコンテンツのみの値 (果物の名前など) が返されるように、サーバー側で少しクリーンアップを行う必要があります。

于 2013-05-03T14:31:22.397 に答える