Question

我有一个数据绑定，其中我必须应用两个css类

data-bind ="css: isHiddenStage"

isHiddenStage ==＆gt;函数返回基于某些逻辑的css类，这工作正常，我想根据某些条件应用另一个css类

css:{ my-class:$index() + 1 === 10 }

注意：这里我不能使用 isHiddenStage 功能来检查条件最后我得到了这个：

    data-bind ="css: isHiddenStage, css:{ my-class:$index() + 1 === 10 }"

哪个不起作用可能是因为，我无法在绑定中使用 css 两次。有没有其他选择。

此致

Answer 1

同一元素上不能有多个css绑定。创建一个函数，该函数返回由空格分隔的所有css类，以便在单个css绑定中使用。

HTML

<div data-bind="css: getCssClassesForIndex($index)"></div>

查看模型

this.getCssClassesForIndex = function (index) {
    var cssClasses = this.isHiddenStage() || '';
    if ((index + 1) === 10) {
        cssClasses += ' my-class';
    }
    return cssClasses;
}.bind(this);

Answer 2

如下：

data-bind ="css:{ isHiddenStage: true, 'my-class': $index() + 1 === 10 }"

这样就会始终应用isHiddenStage（）类，因为它的条件总是为真。

请注意，我将'my-class'放在引号中，因为它不是有效的标识符。

Knockout documentation link source

如何使用Bindngs添加多个CSS类

2 个答案: