javascript - 数据绑定(bind)样式不适用于 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>

你们看到这里有什么不正确的地方吗？

附言。使用 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>