Knockout.js mapping not displaying data bound on child observableArray

Question

I have a child observable array on an defined object. When the object from the server is returned and populated into the knockout observable the data fails to display. However the data is in the view model can can be verified with debugging. I have created jsFiddle that illustrates the problem.

http://jsfiddle.net/CraigHead/Y2Fr6/

My view models are defined as such

function PropertyLease(propertyLeaseId, propertyCatalogId, confirmedBldgSF, leaseExpenseStructure, leaseTermRate, propertyType, yearBuilt)
{
    var self = this;
    self.PropertyLeaseId  = ko.observable(propertyLeaseId);
    self.PropertyCatalogId = ko.observable(propertyCatalogId);
    self.ConfirmedBldgSF = ko.observable(confirmedBldgSF);
    self.LeaseExpenseStructure = ko.observable(leaseExpenseStructure);
    self.LeaseTermRate = ko.mapping.fromJS(leaseTermRate);
    self.PropertyType = ko.observable(propertyType);
    self.YearBuilt = ko.observable(yearBuilt);
}

function PropertyLeaseTermRate(propertyLeaseTermId, propertyLeaseId, from, to, annualRatePSF)
{
    var self = this;
    self.PropertyLeaseTermId = ko.observable(propertyLeaseTermId);
    self.PropertyLeaseId = ko.observable(propertyLeaseId);
    self.From = ko.observable(from);
    self.To = ko.observable(to);
    self.AnnualRatePSF = ko.observable(annualRatePSF);
}

and I update them when the data is returned from the server like

viewModel.LeaseSearchResults.removeAll();
var vmLeaseSearchResults = viewModel.LeaseSearchResults();
for(var idx = 0; idx<result.LeaseSearchResults.length; idx++){
    var data = result.LeaseSearchResults[idx];
    vmLeaseSearchResults.push(
        new PropertyLease(
            data.PropertyLeaseId, 
            data.PropertyCatalogId, 
            data.ConfirmedBldgSF, 
            data.LeaseExpenseStructure, 
            data.LeaseTermRate, 
            data.PropertyType, 
            data.YearBuilt
            )
        )
}
viewModel.LeaseSearchResults.valueHasMutated();

I am not sure what I am doing wrong? Arg!

P.S. The second View Model PropertyLeaseTermRate isn't used until the user makes a choice from a data grid. ;-) Sorry for the confusion there.

nemesv · Accepted Answer · 2013-06-17 20:00:45Z

1

You have multiple problems:

If you are writing var vmLeaseSearchResults = viewModel.LeaseSearchResults(); because of the () you are referencing the underaying array and not the observable array itself. So when you are calling vmLeaseSearchResults.push Knockout won't be notified so you need the call valueHasMutated.

But the correct approach is to let Knockout do the change tracking so you should remove the (): so var vmLeaseSearchResults = viewModel.LeaseSearchResults; then you don't need the valueHasMutated call.
You have the same problem with the var vmLeaseTermRate = viewModel.SelectedLease().LeaseTermRate();

However here you have a second problem. When you call viewModel.SelectedLease(value); knockout will start to bind your details list in the <div data-bind="with: SelectedLease">. But your model (value) does not have the LeaseTermRate defined yet, so Knockout will silently fail on the ko foreach: LeaseTermRate.

To fix it just move the LeaseTermRate declaration before the SelectedLease call:
```
var value = ko.mapping.fromJS(item);
value.LeaseTermRate = ko.observableArray();
viewModel.SelectedLease(value);
var vmLeaseTermRate = viewModel.SelectedLease().LeaseTermRate;
```

Demo JSFiddle.

answered Jun 17, 2013 at 20:00

nemesv

140k16 gold badges424 silver badges364 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr. Young Over a year ago

I like your second answer. However your first answer poses a performance issue. The reason why I suspend the observable and access the raw underlying array is for data-sets larger than a few hundred items. So calling valueHasMutated() is just fine for me. I don't mind writing and extra line of code if it allows me to updated with a few thousand rows of data. What really got me was the declaration of the value.LeaseTermRate = ko.observableArray();. I guess I forgot that knockout has no room to re-bind properties once model is sent to it.

Collectives™ on Stack Overflow

Knockout.js mapping not displaying data bound on child observableArray

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related