0

現在選択されているアイテムを次のようにバインドしています。

選択したアイテムが表示されますが、選択されていないアイテムに選択されていない/デフォルトの背景色を与えるにはどうすればよいですか? テンプレート クラスに背景色を設定すると、マウス クリックによる選択から設定された背景色が表示されなくなります。

背景が 2 つ設定されているのに、何も削除されていないことが問題なのでしょうか?

<div data-bind="foreach: items">
        <div class="cellContainer" >
            <div class="template" data-bind="click: $parent.selectItem, css: { selected: isSelected }">
                <div data-bind="text: number"></div>                    
            </div>
        </div>
    </div>

.selected {
        background-color: #0094ff;
    }
4

3 に答える 3

0

引数でメソッドを true に設定する前に、selectItemメソッドがすべての要素でリセットされていることを確認してください。isSelected単純な実装は次のようになります。

var ViewModel = function() {
    // Skipped the rest for brevity...

    self.selectItem = function(item) { 

        // Deselect all items first
        for (var i = 0; i < self.items().length; i++) {
            self.items()[i].isSelected(false);
        }

        // Select the argument
        item.isSelected(true);
    };
};

デモについては、この jsfiddleを参照してください。

ただし、親ビュー モデルで現在選択されているアイテムへの参照を保持し、cssバインディングを次のように変更する方が簡単な場合がよくあります。

css: { selected: $parent.TheOneSelectedItem().number() == number() }

代替デモについては、このフィドルを参照してください。

于 2013-07-01T19:06:59.353 に答える
0

このようなものがうまくいくかもしれません。

.template {
    background-color: #fff;
}
.template.selected {
    background-color: #0094ff;
}

ノックアウトの問題のようには見えません。

于 2013-07-01T19:07:03.567 に答える