Replace all elements in Knockout.js observableArray

javascript knockout.js knockout-2.0 ko.observablearray
C.J. picture C.J. · Mar 15, 2012 · Viewed 13.9k times · Source

I have an observableArray in my view model. After creating the vm I wish to completely replace the data the observableArray. Here's how I'm doing it:

//Initial Setup
var vm = {};
vm.roles = ko.observableArray([]);
ko.applyBindings(vm); 


//....replace array later on....
vm.roles(["1", "2"]);

This seems to be working fine, but I was concerned if this was incorrect and might lead to memory leaks. Can anyone conform if this is the preferred way to update an existing observableArray assuming you wish to replace all its data?

I noticed observableArray does have a removeAll() method and wondered if that needed to be called to do this cleanly, or if I'm fine with what I'm doing?

Answer

RP Niemeyer picture RP Niemeyer · Mar 15, 2012

The technique that you are using is the recommended approach for completely replacing the data in an observableArray. An observableArray is actually just a normal observable with extra functions added for useful array operations that act on the underlying array and trigger notifications.

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