如何使用绑定添加多个 CSS 类答案

【问题标题】：How to add Multiple CSS classes Using Bindngs如何使用绑定添加多个 CSS 类
【发布时间】：2015-08-20 12:05:50
【问题描述】：

我有一个数据绑定，我必须在其中应用两个 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 }"

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

问候

【问题讨论】：

考虑将isHiddenStage 重命名为getHiddenStageCssClass。或者，如果由于某种原因无法重命名该函数，请将其包装起来。 isHiddenStage 听起来像一个布尔属性。

标签： html css asp.net-mvc knockout.js

【解决方案1】：

类似的东西呢：

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

这样，isHiddenStage() 类将始终被应用，因为它的条件始终为真。

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

Knockout documentation link source

【讨论】：

我不确定这是否真的以我理解的方式回答了这个问题。 isHiddenStage 不是要应用的类（如果是，您可以将其粘贴在普通的 class 属性中），而是一个可以根据其中的逻辑返回不同类的函数。
在这种情况下，你不能只向 isHiddenStage() 添加一个额外的参数，它允许你在正常返回值之外输出“my-class”，或者将两者组合成一个新的 ko。计算（）调用calculateClass（）或什么？如果您的功能已发布，我可以给出更好的答案。
@br4d 我想，但是我不允许更改现有功能:(

【解决方案2】：

同一元素上不能有多个 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);

【讨论】：

不错。我没有想到要传入$index