Question

我正在为倒数计时器制作一个小应用程序，其中我使用了多个类的knockout css绑定。现在，问题是如果我在单独的处理程序中编写逻辑它工作正常，但如果尝试实现与css绑定内联相同的逻辑，它不能按要求工作。

<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>

似乎在内联css绑定中，如果condition为true，那么它应用类，但是当检查下一个语句为false时，它将删除上一步中添加的类。此内联css检查是否有任何解决方法，因为许多switch语句在工作代码中看起来不太好。

Answer 1

我今天只需要这个，我更喜欢 docs 上提到的多个CSS类绑定。

您可以一次设置多个CSS类。例如，如果您的视图模型具有名为isSevere的属性。

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

您甚至可以通过将名称包含在以下引号中来设置基于相同条件的多个CSS类：

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

Answer 2

您可以使用计算函数来获取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';
    }
});

knockout js css多类绑定

2 个答案: