Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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);
like image 852
Varunkumar Manohar Avatar asked Aug 29 '14 16:08

Varunkumar Manohar


2 Answers

Simply:

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

It does everything, make both properties and arrays observable. The second parameter of this method is only for the purpose of customization. You do not have to use it if you do not need!

like image 76
Luo Jiong Hui Avatar answered Oct 09 '22 07:10

Luo Jiong Hui


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.

like image 39
Origineil Avatar answered Oct 09 '22 07:10

Origineil