4

我有一个相当长的淘汰赛 css 绑定应用于 <li> 元素。

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

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

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

在我脑海中存在的完美世界中，我本来可以结合这三个类分配语句（它们单独工作）：

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

<li data-bind="css: workItemTypeName">
</li>

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

变成这样的东西：

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

经过一番折腾，我设法做到了这一点（有效）：

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

但我只是不喜欢它......有人知道是否可以将静态、计算和切换语句组合到同一个 css 绑定中吗？或者，如果它是已经被问到并且将来可能被添加到淘汰赛中的东西？

4

2 回答 2

4

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

self.workItemCss = ko.computed(function () {
    return "workItem" + (self.isNotRead() ? " notRead" : "")
        + " " + self.workItemTypeName();
});

<!-- html -->
<li data-bind="css: workItemCss">
于 2013-11-08T15:29:26.930 回答
4

虽然@ExplosionPills 的解决方案朝着正确的方向发展，但它仍然不够惯用，恕我直言。

Knockout 期望绑定中包含 CSS 类名和真/假值或可观察对象 (!) 的对象css。所以就给它一个。

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

http://jsfiddle.net/SHmc8/（互动：http: //jsfiddle.net/SHmc8/1/）

请注意，您还可以同时使用class属性和css绑定：

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

所以这classes.workItem = true;真的没有意义。

于 2013-11-08T15:45:55.087 回答