0

我有一个这样的计算 css 绑定

this.iconCss = ko.computed(function () {
    var css = { icon: true };
    css[this.state().toLowerCase()] = true;
    return css;
}, this);

它的作用是显示一个图标，可视化工作流中每个步骤的状态，例如，我希望 css 看起来像这样class="icon running“或class="icon failed"等等

问题是css绑定不会清除旧类，所以如果我首先拥有这个class="icon queued"并将状态更改为运行新类将class="icon queued running"是错误的，我为它分配一个新的对象文字并不重要，旧类不会被清除，一种方法是存储对象文字并对其进行迭代并将其所有属性设置为false。如果没有内置清除 css 绑定的清洁器，那是我最后的手段。

编辑：这是一个解决方案，但我不喜欢它

this.iconCssState = {};

this.iconCss = ko.computed(function () {
    for (var index in this.iconCssState) {
        this.iconCssState[index] = false;
    }

    this.iconCssState.icon = true;
    this.iconCssState[this.state().toLowerCase()] = true;
    return this.iconCssState;
}, this);
4

1 回答 1

1

class你可以用我的绑定做你想做的事。（请注意，在下一个版本的 Knockout 2.2 中，您将能够以css相同的方式使用绑定。）

<div class="icon" data-bind="class: state().toLowerCase()"></div>
于 2012-09-21T20:52:33.663 回答