子オブジェクトのプロパティにテキストをバインド

Question

knockout.jsを使用すると、サーバーからJSONオブジェクトの子オブジェクトのプロパティにバインドできますか？具体的には、私はこのようになりますサーバーからオブジェクトを与えられていた場合：私は、「マッピング」プラグインを介して、このjavascriptオブジェクトからのViewModelを作成

var obj = { 
    list: [ { key: "a", value: 1 }, 
      { key: "b", value: 2 }, 
      { key: "c", value: 3 }   
     ], 
    selected: { 
     key: "", 
     value: null 
    } 
}; 

：

var viewModel = ko.mapping.fromJS(obj); 

そして、私はlistをバインドそのような<select>タグに：

<select data-bind="options: list, optionsText: 'key', 
        optionsValue: 'value', 
        value: selected"> 
</select> 

私は私のViewModelのプロパティselectedように値を割り当てました。つまり、オプションを選択すると、viewModel.selected.key()とviewModel.selected.value()のコードを正常にクエリし、最新の値を取得できます。

ただし、選択したアイテムのkeyまたはvalueデータをスパンに表示するにはバインドできません。たとえば、選択した値が表示されません。

<span data-bind="text: selected.value"></span> 

私は何をしたいですか？適切なコンテキストを確立するために実際のシンプルなテンプレートを使用する必要がありますか（つまり、selected）？

私は状況hereの例を持っています。私は具体的には、子供selectedオブジェクトを観測可能なものにマッピングしようとしましたが、運がありません（追加のオプションでコメントアウトされたマッピング呼び出しを参照してください）。

Answer 1

あなたはマッピングオプションで正しい軌道に乗っていました。 selectedを観測可能にすると、ドロップダウンで変更を加えたときにUIが更新されます。あなたの場合、それは空であってもよい。

selected: { key="", value=null } 

それはselectedkeyとvalue観測を行うことはなくなります。注意すべき

ことの一つは、のようなオブジェクトを持つとき、マッピング・プラグインのお得な情報ということです。

もう1つの問題は、最初の選択でoptionsValue: 'value'が指定されていることです。これにより、オブジェクトの代わりにselectedにオブジェクトのvalueプロパティが書き込まれます。

オブジェクト自体を書きたい場合は、optionsValueバインディングを完全に削除する必要があります。

は、ここでこれらの更新プログラムであなたのフィドルです： http://jsfiddle.net/rniemeyer/Dubu9/2/