javascript - 数据绑定(bind)样式不适用于if else条件

我试图根据从js文件中获取的值来更改div的背景。

因此，如果该值不同于0，我想有一个背景，如果它的值为0，我想有另一个背景。

这是我正在尝试的标记：

<tbody data-bind="foreach: skills">
    <tr>
        <td>
            <div data-bind="attr: { id: Id }, style: { background: Outstanding != '0' ? 'none repeat scroll 0 0 #B33A3A;' : 'none repeat scroll 0 0 #396eac;' }">
                <span data-bind="text: Name" style="color: #ffffff;"></span>
            </div>
            <div>
                <span data-bind="visible: Outstanding != '0', text: Outstanding + ' Needed'" style="color: #365474"></span><br/>
                <span data-bind="text: Employees" style="color: #365474"></span>
            </div>
        </td>
    </tr>
</tbody>

你们看到这里有什么不正确的东西吗？

PS。使用Chrome插件Knockoutjs上下文调试器，我能够看到Outstanding的实际值为0：

最佳答案

您在背景值的末尾有不必要的分号（;）。
将行更改为：

<div data-bind="attr: { id: Id }, style: { background: Outstanding != '0' ? 'none repeat scroll 0 0 #B33A3A' : 'none repeat scroll 0 0 #396eac' }">

那应该解决它。

请参见下面的示例：

(function() {
    'use strict';

    function MyVM() {
        var self = this;
        self.skills = ko.observableArray([
            { Id: 1, Outstanding: '0', Name: 'Foo', Employees: 'Person A' },
            { Id: 2, Outstanding: '1', Name: 'Bar', Employees: 'Person B' }
        ]);


    }

    ko.applyBindings(new MyVM(), document.body);
}());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table>
    <tbody data-bind="foreach: skills">
        <tr>
            <td>
                <div data-bind="attr: { id: Id }, style: { background : Outstanding !== '0' ?  'none repeat scroll 0 0 #B33A3A' : 'none repeat scroll 0 0 #396eac' }">
                    <span data-bind="text: Name" style="color: #ffffff;"></span>
                </div>
                <div>
                    <span data-bind="visible: Outstanding != '0', text: Outstanding + ' Needed'" style="color: #365474"></span><br/>
                    <span data-bind="text: Employees" style="color: #365474"></span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

关于javascript - 数据绑定(bind)样式不适用于if else条件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29526674/