Thoughts from the Wet Coast
The musings of an ASP.NET Developer from Canada's We(s)t Coast

So, in the last post on Knockout.js, I introduced the concept of Observable Arrays.  Observable Arrays can respond to a change in the number of items in the collection (array).

Lets look first at Adding items to an observable array.  Lets add a method to our ViewModel to add a task to the tasks array that we created in the previous post.

Figure 1: Adding the addTask method to the TasksViewModel

As I mentioned in the previous post a Knockout observableArray essentially has the same set of methods as a normal array, so we can add a new “task” to the Tasks array, by calling the push method and passing a new “task” object.

Next we can add a button to our View that can be used to call this method.

Figure 2: Adding an AddTask button to the View

This introduces a new binding - the click binding.  The click binding binds a method (function) on the ViewModel to the click event of the button.  When a user clicks the button the click event is fired and the addTask method is called which updates the observableArray with a new task and knockout adds a new row to the table.

Figure 3: Adding items to an Observable Array example

This renders the following in the browser.

and clicking the Add Task button causes an additional row to be rendered.

So that was adding an item to an observable array.  Next we will look at how to remove items from an observable array.   Lets start, again, by adding the removeTask method to the ViewModel.  This is shown in Figure 4.

Figure 4: Adding the removeTask method to the TasksViewModel

In this method we will pass in the task to removed as a parameter, and then call the remove method of the observableArray to remove the task from the collection (array).

Next we are going to add a new column to our table in the View, which includes a button with a click binding defined - Figure 5.

Figure 5: Adding a Remove button to the View

As with the Add Task button we use the click binding.  However, this time as we are in the scope of an individual task we need to use the $parent keyword to access the ViewModel.  Note, that in Figure 4 the removeTask method accepted a task parameter.  Knockout automatically passes the current context (in this case a task) to any method that is bound to the click data-binding.

Figure 6: Removing items from an Observable Array example

This renders the following in the browser:

and clicking on the remove button will fire the click event causing the task to be removed from the array and the row to be removed from the table.

Observable Arrays can be very powerful, but an observable array only manages the addition and removal of items in the array.  The next step is to combine all we have covered and use an observable array of observable objects.  We will cover that in the next post in the series.