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

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

Answer 2

确保您的selectItem方法在所有元素上重置isSelected，然后在参数上将其设置为true。一个天真的实现可能是：

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

请参阅this jsfiddle了解演示。

但是，通常更容易将父视图模型的引用保留到当前选定的项目，并将css绑定更改为：

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

有关替代演示，请参阅this fiddle。

Answer 3

这样的事情可能有用。

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

它看起来不像是淘汰赛。

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

3 个答案: