How to do Knockout observable objects inside observable array

javascript knockout.js knockout-2.0
Chamith Malinda picture Chamith Malinda · Jun 4, 2013 · Viewed 15.5k times · Source

I want to implement an observable array and inside that array there should be observable objects (JS object). And In the view I'm iterating this array and getting the object and show the object properties. Let say there is a object like following,

{"name":"john","age":21,"address":"No 25"}

Imagine the observable array is consisting with objects like above.

Then I want to change single property (e.g name) of a particular object and need to see the change on the view.

How can I do this using knockout ?

Thanks.

Answer

Rune Vejen Petersen picture Rune Vejen Petersen · Jun 4, 2013

If you set up your users in a viewModel and map it with knockout mapping you should get the desired result. Something like:

myObservableArray.push(new UserViewModel( {"name":"john","age":21,"address":"No 25"} ));  

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

This way each of the mapped properties will be an observable and when they change, this will be reflected in your markup.

Related questions

Binding true / false to radio buttons in Knockout JS

In my view model I have a IsMale value that has the value true or false. In my UI I wish to bind it to the following radio buttons: <label>Male <input type="radio" name="IsMale" value="…

Read More
Subscribe to observable array for new or removed entry only

So yes I can subscribe to an observable array: vm.myArray = ko.observableArray(); vm.myArray.subscribe(function(newVal){...}); The problem is the newVal passed to the function is the entire array. Is there anyway I can get only the delta …

Read More
Knockout.js Make every nested object an Observable

I am using Knockout.js as a MVVM library to bind my data to some pages. I'm currently building a library to make REST calls to a web service. My RESTful web service returns a simple structure: { id : 1, details: { name: "…

Read More