CODEWITHSUNDEEP
knockout.jsknockout-mapping-plugin
SventoryMang
SventoryMang

Reputation: 10479

knockout style binding is not updating

I've got the following markup:

<div data-bind="foreach: ReportsByPriority">
    <h2><span data-bind="text: Priority.Name"></span> Priority <span class="more-info"></span><span class="info small" data-bind="text: Priority.Description"></span></h2>
    <ol data-bind="foreach: ReportReplies" >
        <li><span data-bind="text: Name"></span<br/><br/>
            <input type="checkbox" name="ViolationCorrected" id="ViolationCorrected" data-bind="checked: ViolationCorrected"/>
            <span data-bind="style: { color: (ViolationCorrected == true ? '#3c801b' : 'red')}">Violation Corrected</span><br/><br/>
        </li>    
    </ol>
</div>

I am using the mapping util to convert my server model into a knockout model. When the page loads, everything looks correct, but when I try to check or uncheck my ViolationCorrected checkbox, the color of the text doesn't change. In the console when I type this:

mappedModel.ReportsByPriority()[0].ReportReplies()[0].ViolationCorrected()

It is showing the correct and updated value of each checkbox, but the color of the text doesn't change. If in console it's showing an updated value, it's definitely a working observable and capturing the changed value, so why doesn't the style binding color check on the span change to reflect that?

Upvotes: 1

Views: 2129

Answers (1)

PW Kad
PW Kad

Reputation: 14995

You need to get the value of the observable since you are doing conditional logic - 

<div data-bind="foreach: ReportsByPriority">
    <h2><span data-bind="text: Priority.Name"></span> Priority <span class="more-info"></span><span class="info small" data-bind="text: Priority.Description"></span></h2>
    <ol data-bind="foreach: ReportReplies" >
        <li><span data-bind="text: Name"></span><br/><br/>
            <input type="checkbox" name="ViolationCorrected" id="ViolationCorrected" data-bind="checked: ViolationCorrected"/>
            <span data-bind="style: { color: (ViolationCorrected() === true ? '#3c801b' : 'red')}">Violation Corrected</span><br/><br/>
        </li>    
    </ol>
</div>

The reason it works on load is because ViolationCorrected is a function and therefore is not equal to false, and anything not equal to false is equal to true.

Upvotes: 3

Related Questions