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

Question

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

<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 "

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

score 9 · Accepted Answer

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

score 4 · Accepted Answer

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

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

这个概念的一个例子：

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

2 回答 2