&引用；“高级”；剔除css绑定语句不'；I don’我的行为与预期完全不一样

我有一个相当长的敲除css绑定应用于

元素

在我的视图模型中的正确场景下，类列表可以如下所示：

<li class="workItem task notRead">
</li>

<li data-bind="css: { 'workItem', workItemTypeName, 'notRead': isNotRead }">
</li>

其中“workItem”只是一个静态字符串，“task”从视图模型中计算的“workItemTypeName”返回，“notRead”根据视图模型中的属性进行切换

在我头脑中存在的完美世界中，我将能够结合这三种课堂作业陈述（它们各自工作）：

变成这样：

<li class="workItem task notRead">
</li>

<li data-bind="css: { 'workItem', workItemTypeName, 'notRead': isNotRead }">
</li>

经过一番周折后，我终于做到了这一点（这是可行的）：

---

但我只是不喜欢它。。。有人知道是否可以将静态、计算和切换语句组合到同一个css绑定中吗？或者，如果它是已被询问的内容，将来可能会添加到knockout中？

您可以在ViewModel中创建一个计算方法，将值返回到绑定，而不依赖于单个值。（在我看来）这更像是击倒

self.workItemCss=ko.computed（函数（）{
返回“workItem”+（self.isNotRead（）？“notRead”：“”）
+“”+self.workItemTypeName（）；
});

虽然@ExplosionPills的解决方案方向正确，但它仍然不够地道，IMHO

Knockout要求在

CSS

绑定中有一个CSS类名和truthy/falsy值或可观测值（！）的对象。所以就给它一个

self.workItemCss = ko.computed(function () {
    var classes = {};
    classes.workItem = true;
    classes.notRead = self.isNotRead;
    classes[ko.unwrap(self.workItemTypeName)] = true;
    return classes;
});

（互动：）

---

请注意，您还可以使用

class

属性和

css

绑定：

<li class="any fixed classes" data-bind="css: workItemCss">

因此

classes.workItem=true真的没有意义

<li class="any fixed classes" data-bind="css: workItemCss">