如何指定两个css类：from property和conditional class

Question

我知道在淘汰赛中有能力从observable属性中指定类，如下所示：

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

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

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

但是如果我需要敲除css绑定的那些功能，应该指定哪个标记？

我试过这个，但没有运气：

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

我收到了错误：

  

错误：无法解析绑定。 SyntaxError：意外的标记，;

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

更新

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

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

并在html中指定此类：

data-bind="css: AdditionalCss "

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

Answer 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' :'')) }">

Answer 2

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

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

这个概念的一个例子：

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

Answer 3

不是OP问题的解决方案，但我得到了意外的令牌; （分号）错误，因为我有一个绑定：

data-bind="css { selected: isFooSelected }"...

当然，css之后缺少一个冒号：

data-bind="css: { selected: isFooSelected }"...

我可能在IDE和聊天窗口之间疯狂地输入时不小心删除了冒号而且什么不是。