knockout.js - ノックアウトによるマスター/詳細

Question

KnockoutモデルのobservableArrayがあります。選択したものの詳細を表示し、そのノックアウトアイテムのモデルにテキストボックスなどをバインドしたままにしたいのですが、可能ですか？

Answer 1

アイテムを格納するためのobservableArrayを作成し、それらをいくつかのhtmlにバインドして表示する必要があります。次に、クリックバインディング（またはその他のイベント）を使用して、ユーザーが選択したイベントをトラップします。次に、そのイベントで、選択したアイテムを設定できます。

これを示すフィドルがあります。

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

HTMLは次のようになります。

<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>​