敲出js css多类绑定 [英] knockout js css multiple class bindings

问题描述

我正在做一个小应用程序的倒计时计时器，其中我使用knockout css绑定多个类。现在，问题是如果我写的逻辑在单独的处理程序，它是工作正常但如果试图实现相同的逻辑内联与css绑定，它不工作所需。

I am making a small app for countdown timer in which i have used knockout css binding with multiple classes. Now, the problem is if i am writing the logic in separate handler it is working fine but if trying to implement the same logic inline with css binding its not working as required.

工作版本： 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>

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

It seems like in inline css binding if condition is true then its applying the class but when checking next statement which is false it removes the class added in previous step. Is there any workaround for this inline css check because lots of switch statements are not looking good in the working code.

推荐答案

需要今天，我更喜欢 文档 上指出的多个CSS类绑定。

I just needed this today, I prefer the multiple CSS class binding noted on the docs.

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

You can set multiple CSS classes at once. For example, if your view model has a property called isSevere.

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

您甚至可以根据相同的条件通过包装设置多个CSS类引号中的名称如下：

You can even set multiple CSS classes based on the same condition by wrapping the names in quotes like:

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

这篇关于敲出js css多类绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！