Question

What am I doing wrong? I am trying to create a simple master details view a la the ‘canonical MVVM’ example.

Here’s a simplified example in JSfiddle that doesn’t work: http://jsfiddle.net/UJYXg/2/

I would expect to see the name of the selected ‘item’ in the textbox but instead it says ‘observable’?

Here’s my offending code:

var list = [ { name: "item 1"} , { name: "Item 2" }];

var viewModel = {
    items : ko.observableArray(list),
    selectedItem : ko.observable(),
}

viewModel.setItem = function(item) {
    viewModel.selectedItem(item);   
}

ko.applyBindings(viewModel);

And the HTML

<ul data-bind="foreach: items">
    <li>
        <button data-bind="click: $root.setItem, text:name"></button>
    </li>
</ul>

<p>
    <input data-bind="value:selectedItem.name" />
</p>

Answer 1

You are really close. Just need to do value: selectedItem().name or better use the with binding to change your scope. Also, the script that you are referencing is slightly out-of-date (in 2.0 click passes the data as the first arg).

Sample here: http://jsfiddle.net/rniemeyer/acUDH/