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

Question

I'm trying to change the background of a div depending from the value I'm getting from the js file.

So if the value is different from 0 I would like to have one background and if its 0 I want another background.

This is the markup I'm trying with:

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

Do you guys see anything not correct here?

PS. Using the Chrome addon Knockoutjs context debugger I was able to see that the actual value of Outstanding is 0:

Answer 1

You have unnecessary semicolon (;) at the end of the background value. Change the line to be:

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

That should fix it.

See example below:

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