html - 如何使用绑定(bind)添加多个 CSS 类

Question

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

data-bind ="css: isHiddenStage"

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

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

注意:这里我不能使用isHiddenStage函数来检查条件 所以最后我得到了这个:

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

这不起作用可能是因为我不能在绑定(bind)中使用两次 css。 有没有其他选择。

问候

Answer 1

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

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