Question

我有像这样的计算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);

Answer 1

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

<div class="icon" data-bind="class: state().toLowerCase()"></div>

清除CSS绑定

1 个答案: