Question

Consider the following HTML:

<select data-bind="options: assemblies, optionsText: 'Name', value: selectedAssembly">
</select>

Name <input type="text" data-bind="value: selectedAssembly().Name" />

I’m retrieving assemblies array via jQuery AJAX:

[{"Id":1,"Name":"Foo"},
{"Id":2,"Name":"Bar"}]

selectedAssembly is an observable and ().Name throws an exception.
I need to change Name property reflecting changes at runtime in the select options.
I’ve tried:

<p data-bind="with: selectedAssembly">
    Name <input type="text" data-bind="value: $data.Name" />
 </p>

This way i succeed in retrieving Name property, but its value changes are updated only when user select another option from the box and not in real time.

Answer 1

You need to make the Name property observable on the items inside in the assemblies array to able to edit the items in the select.

You can do the JSON to object with observable properties conversion by hand or you can use the Knockout Mapping plugin which is written to solve this exact problem:

The usage is very simple:

function viewModel() {
    var self = this;    
    self.selectedAssembly = ko.observable();

    // you need to have a default item in assemblies
    // otherwise ko will set undefinied to selectedAssembly because it the 
    // assemblies collection is empty at the begining
    // which brakes the selectedAssembly().Name binding
    self.assemblies = ko.observableArray([{Name: ""}]);    

    $.getJSON('http://localhost:9000/api/assemblies', function(data){
        ko.mapping.fromJSON(data, {}, self.assemblies)
    });
}

A simplified JSFiddle with hardcoded data.