如何指定两个 css 类：来自属性和条件类答案

【问题标题】：How specify two css classes: from property and conditional class如何指定两个 css 类：来自属性和条件类
【发布时间】：2013-07-28 21:42:18
【问题描述】：

我知道在淘汰赛中可以从可观察的属性中指定类，如下所示：

<div data-bind="css: Color " >

Knockout 还提供了指定条件类渲染的能力，如下所示：

<div data-bind="css: { 'my-class' : SomeBooleanProperty  }" >

但是，如果我需要将淘汰赛 css 的这些功能绑定在一起，应该指定哪个标记？

我试过了，但没有运气：

<div data-bind="css: { Color, 'my-class' : SomeBooleanProperty  }" >

我得到了错误：

错误：无法解析绑定。 SyntaxError: Unexpected token ,;

我在谷歌或官方文档中没有找到任何示例。

更新

我找到了一种解决方法：在代码中构建样式字符串并将其放入属性中，如下所示：

item.AdditionalCss(Color() + " " + (result.IsSortable() ? 'my-class' : null));

并在html中指定这个类：

data-bind="css: AdditionalCss "

但我有点困惑，我认为这是肮脏的做法。我认为在标记中实现相同的结果会更好。如何通过标记实现这一点？

【问题讨论】：

【解决方案1】：

使用class binding

<div data-bind="class: myClass" >

查看模型：

var vm = {
     myClass : ko.observableArray(),
};
vm.myClass.push('class1');
vm.myClass.push('class2');

您还可以将类绑定与计算对象结合使用。

但如果你不想使用它，你可以这样做：

<div data-bind="attr: { 'class' :( Color() +  (SomeBooleanProperty() ? ' my-class' :'')) }">

【讨论】：

【解决方案2】：

您也可以使用经典的字符串格式：

<div data-bind="css: Color() + (SomeBooleanProperty ? ' my-class' : '')" >

这个概念的一个例子：

var fullString = ('some' + ' ' + 'strings ') + 'and' + ' ' + 'other strings';
console.log(fullString);

【讨论】：

我不明白这个代码Color()+(SomeBooleanProperty ? ' my-class' : '')任何人都愿意解释。谢谢