CODEWITHSUNDEEP
javascriptknockout.js
flq
flq

Reputation: 22859

Failing to reevaluate property bound to table row knockout.js-style

I am failing to get a column updated from an array of objects loaded from the server.

I have got something like this:

self.tenants = ko.observableArray([{"Id":1,"Name":"Tenant 1","IsActive":true}]);
self.selectedTenant = ko.observable(null);

UI:

<tbody data-bind="foreach: tenants">
  <tr data-bind="css: { 'active-row': $root.selectedTenant() === $data }">
    <td><a href="#" data-bind="click: $root.select">Select</a></td>
    <td data-bind="text: Name"></td>
    <td data-bind="text: Count"></td>
    <td></td>
    <td></td>
    <td data-bind="text: IsActive"></td>
  </tr>
</tbody>

Now I am trying to ensure the UI displays it when I set to IsActive to false.

I know that ideally IsActive is observable, but since I get the array straight from the server, I am not sure how I would do that.

Secondly I am somehow trying to get knockout to reevaluate the array.

I have tried several alternatives, one of which looks like this:

var selected = self.selectedTenant();
selected.IsActive = true;
var idx = self.tenants.indexOf(selected);
//self.tenants.remove(selected);
var newArray = self.tenants().splice(idx, 1, selected);
self.tenants(newArray);
//self.tenants.valueHasMutated();

But it all seems futile, the column always displays the original value. Where am I going wrong, or what should I do?

Upvotes: 0

Views: 108

Answers (1)

Anders
Anders

Reputation: 17564

You need to map your server data to TenantViewModels thats using observables either manual or with the Ko mapping plugin

If you are doing it manual you can use the ko.utils.arrayMap function to map each element in the array from server to a new array with TenantViewModels

Upvotes: 1

Related Questions