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"、それは間違っています。新しいオブジェクトリテラルを割り当てても、古いクラスはそうではありません。クリアする1つの方法は、オブジェクトリテラルを格納し、それを反復処理して、そのすべてのプロパティを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私のバインディングを使用して、やりたいことができます。css（Knockoutの次のバージョン2.2では、バインディングを同じように使用できるようになることに注意してください。）

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