How to make object properties in a knockout observable array be observable?

Varunkumar Manohar picture Varunkumar Manohar · Aug 29, 2014 · Viewed 23k times · Source

When 'create' option is used in knockout mapping we would make the array an observable array. But how do we make the properties of each object in the observable array an observable ?

In this example from the knockout documentation, the children array is made an observable array but I want to make all the elements like id, name within each object literal also to be an observable. How do we achieve that. Just put a ko.observable on each newed object in the create block ?

var data = {
    name: 'Graham',
    children: [
        { id : 1, name : 'Lisa' }
    ]
};

// Your custom data model
var myChildModel = function (data) {
    this.id = data.id;
    this.name = data.name;
};

var mapping = {
    'children': {
        create: function(options) {
            return new myChildModel(options.data);
        }
    }
};

var viewModel = ko.mapping.fromJS(data, mapping);

Answer

Origineil picture Origineil · Aug 29, 2014

Per the documentation:

  • All properties of an object are converted into an observable.

Thus, down in the section regarding Customizing object construction using “create” it states

Of course, inside the create callback you can do another call to ko.mapping.fromJS if you wish.

The example provided is as follows:

var myChildModel = function(data) {
  ko.mapping.fromJS(data, {}, this);

  this.nameLength = ko.computed(function() {
    return this.name().length;
  }, this);
}

Naturally, this would convert all the properties. More detailed configuration could then be applied specifically to that mapping call to handle custom requirements.