Question

I have a Knockout.JS observable array that is the basis for a list:

  self.list_elements = ko.observableArray([
     new list_element("0001", "product 1", "3.99")
  ]);

Variables in this array are observables:

function list_element ( id, name, price ) {
   this.item_id = ko.observable(id);
   this.item_name = ko.observable(name);
   this.item_price = ko.observable(price);
}

There is also a details view, which I want to fill with the data of a list element that is clicked, e.g:

<span data-bind="text: an_item_id"></span>

The function to fill this gets the respective array item from the click handler.

self.fill_form = function ( array_item ) {
    // array_item is the array element corresponding to the selected list element
}

How can I connect the details view with the values in the array so that changing the value in the array shows up in the details view?

Answer 1

Normally, you would create a selected observable and populate it with the currently selected item. Then, you would use the with to render a section with a context specific to the selected item.

Something like:

var ViewModel = function() {
    var self = this;
    this.list_elements = ko.observableArray([...]);

    this.selected = ko.observable();

    this.fill_form = function(item) {
        self.selected(item);
    };
};

Then, you would bind a section like:

<div data-bind="with: selected">
   ...
</div>

If you don’t need to perform any logic in your fill_form function, then you can even just bind a click directly against your selected observable, as the item will get passed as the first argument to the observable (which is a function) and to set its value.

Here is a sample example: http://jsfiddle.net/rniemeyer/YPKk2/