html - 当布尔计算属性为 false/true 时，knockoutjs css 绑定值

Question

我正在绑定我当前选择的项目，如下所示：

选定的项目变得可见，但我怎样才能给未选定的项目一个未选定/默认的背景颜色？当我为模板类设置背景颜色时，我不再看到通过鼠标单击从选择中设置的背景颜色。

问题是否可能是我设置了 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;
    }

Answer 1

听起来像是级联问题。确保您的“.template”样式在您的 css 文件中的“.selected”样式之前定义。

Answer 2

在将参数设置为 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() }

请参阅此小提琴以获取备用演示。

Answer 3

这样的事情可能会奏效。

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

这看起来不像是淘汰赛的问题。