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>

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

4

2 回答 2

23

我今天只需要这个，我更喜欢文档中提到的多个 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 回答