数据绑定样式不适用于if else条件

Question

我试图根据我从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：

Answer 1

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

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