9

複数のクラスでノックアウトCSSバインディングを使用したカウントダウンタイマー用の小さなアプリを作成しています。ここで、問題は、別のハンドラーでロジックを記述している場合は正常に動作しますが、CSS バインディングを使用してインラインで同じロジックを実装しようとすると、必要に応じて動作しないことです。

作業バージョン: http://jsfiddle.net/gzejF/3/

<div class="dateTimer" data-bind="timer: startTime, timerOptions: {speed: 1000}">
    <div class="tens">
        <div class="upperTensClock timerLine"></div>
        <div class="lowerTensClock timerLine"></div>
    </div>
    <div class="units">
        <div class="upperClock timerLine"></div>
        <div class="lowerClock timerLine"></div>
    </div>
</div>

動作しないバージョン: http://jsfiddle.net/K6m93/

<div class="dateTimer">
    <div class="tens">
        <div class="upperTensClock" data-bind="css: {
            'l1 l2 l3': tens() == 0,
            'l3': tens() == 1,
            'l2 l3 l7': tens() == 2 || tens() == 3,
            'l1 l3 l7': tens() == 4,
            'l1 l2 l7': tens() == 5 || tens() == 6,
            'l2 l3': tens() == 7,
            'l1 l2 l3 l7': tens() == 8 || tens() == 9 
            }"></div>

        <div class="lowerTensClock" data-bind="css: {
            'l4 l5 l6': tens() == 0 || tens() == 6 || tens() == 8,
            'l4': tens() == 1 || tens() == 4 || tens() == 7 || tens() == 9,
            'l5 l6': tens() == 2,
            'l4 l5': tens() == 3 || tens() == 5
            }"></div>

    </div>

    <div class="units">
         <div class="upperClock l1 l2 l3 l7" data-bind="css: {
            'l1 l2 l3': units() == 0,
            'l3': units() == 1,
            'l2 l3 l7': units() == 2 || units() == 3,
            'l1 l3 l7': units() == 4,
            'l1 l2 l7': units() == 5 || units() == 6,
            'l2 l3': units() == 7,
            'l1 l2 l3 l7': units() == 8 || units() == 9 
            }"></div>

        <div class="lowerClock l4 l5 l6" data-bind="css: {
            'l4 l5 l6': units() == 0 || units() == 6 || units() == 8,
            'l4': units() == 1 || units() == 4 || units() == 7 || units() == 9,
            'l5 l6': units() == 2,
            'l4 l5': units() == 3 || units() == 5
            }"></div>


    </div>

</div>

条件が true の場合、インライン css バインディングのように見えますが、クラスを適用しますが、false である次のステートメントをチェックすると、前のステップで追加されたクラスが削除されます。多くの switch ステートメントが作業コードで見栄えがよくないため、このインライン css チェックの回避策はありますか。

4

2 に答える 2

23

今日はこれが必要でした。 docsに記載されている複数の CSS クラスバインディングを好みます。

一度に複数の CSS クラスを設定できます。たとえば、ビュー モデルに isSevere というプロパティがあるとします。

<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">

次のように名前を引用符で囲むことにより、同じ条件に基づいて複数の CSS クラスを設定することもできます。

<div data-bind="css: { profitWarning: currentProfit() < 0, 'major highlight': isSevere }">
于 2014-04-28T20:31:17.383 に答える
15

計算関数を使用して CSS を取得できます。このようなもの:

html:

<div class="upperTensClock" data-bind="css: upperTenCSS()"></div>

Javascript:

self.upperTenCSS = ko.computed(function() {
    switch(self.tens()) {
        case 0:
            return 'l1 l2 l3';
        case 1:
            return 'l3';
        case 2:
        case 3:
            return 'l2 l3 l7';
        case 4:
            return 'l1 l3 l7';
        case 5:
        case 6:
            return 'l1 l2 l7';
        case 7:                
            return 'l2 l3';
        case 8:
        case 9:
            return 'l1 l2 l3 l7';
    }
});   
于 2013-10-02T10:16:34.823 に答える