Master/Detail with Knockout

Question

I have an observableArray of Knockout models. I want to be able to display detail for the one that's selected and keep the textboxes etc. bound to the model for that Knockout item, possible?

Answer 1

You'll want to create an observableArray to store the items, and bind them to some html to show them. Then use a click binding to (or some other event) to trap which one the user selected. Then in that event you can set the selected item.

Here is a fiddle that demonstrates this.

http://jsfiddle.net/johnpapa/3DPvU/

The HTML could like look this:

<ul data-bind="foreach: people">
<li data-bind="text:name, click:$parent.selectPerson"></li>
</ul>

<div data-bind="with:selectedPerson">
<span data-bind="text:id"></span>
<input data-bind="value:name"/>
<input data-bind="value:country"/>
</div>​