sid99
sid99

Reputation: 11

Observable array not getting reflected in UI in knockout

I have a observable array which has 2 observable properties. I am able to update the array when placing an input box through the UI as below

<tbody data-bind="foreach: Scopes.ScopesData">
                <tr style="vertical-align: baseline">
                    <td style="white-space:nowrap"><span data-bind="text: name" /></td>
                    <td>                               
                        <input type="checkbox" data-bind="checked: HeadCountFlag, enable: isAvailable" />


   </td>                                
                    <td>                                 
                        <input data-bind="textInput: HeadCountpercent, enable: isAvailable" class="amount" /> 
                   </td>

                    </tr>
                </tbody>

In here ScopesData is an observable array and the 2 properties HeadCountFlag and HeadCountpercent are also observable.

I am able to make a change to it and see it getting updated as below

<span data-bind="text: Scopes.ScopesData()[0].HeadCountpercent()"></span>

Now I want to update this through some javascript code when some event happens and I am able to change the data and it gets saved also but it is not being reflected in the UI.

 model.Scopes.ScopesData._latestValue[0].HeadCountpercent._latestValue = 99;

Can someone please tell me what change do I need to make to have this Scopes.ScopesData()[0].HeadCountpercent() update from the js code and see it get updated in the UI.

Thanks

Upvotes: 0

Views: 221

Answers (2)

adiga
adiga

Reputation: 35222

You don't need to access _latestValue. To write a new value to the observable, you need call the observable and pass the new value as an argument.

model.Scopes.ScopesData()[0].HeadCountpercent(99);

Here's a fiddle for testing. I have added a button, which will call a javascript function to update ScopesData's first index with a new value.

Upvotes: 1

sid99
sid99

Reputation: 11

Just found the answer by referring this thread Knockout observable change not detected if value changed externally

Basically I can set the value using model.Scopes.ScopesData._latestValue[0].HeadCountpercent(99);

Upvotes: 0

Related Questions