0

私は2つのオブザーバブルを持っています:

self.areasAndProfessionsList = ko.observableArray();
self.selectedAreaFromDropList = ko.observable();

Json データを取得して に保存しareasAndProfessionsListます。データの構造は次のとおりです。

{"Areas":[{"ID":1,"Name":"name", "Professions":[{"ID":1,"Name":"name1"}{"ID":2,"Name":"name2"}...

だから、私は他の配列に配列を持っています。次に、2 つのドロップダウン リストを作成します。それらのバインディングは次のようになります。

<select data-bind="options: $root.areasAndProfessionsList, optionsText: function(item) {return item.Name}, value: $root.selectedAreaFromDropList"></select>
<select data-bind="options: $root.selectedAreaFromDropList.Professions, optionsText: 'Name'"></select>

最初のバインディングは問題なく動作します。エリアの名前が表示されます。ただし、2 番目のドロップダウン リストが正しく機能しません。空でないことを確認しましたselectedAreaFromDropListが、コンソールにエラーは表示されません。バインドする Name プロパティにアクセスするにはどうすればよいですか?

4

1 に答える 1

0

オブザーバブル内にある実際のアイテムではなく、オブザーバブル にバインドしています。selectedAreaFromDropList目的の効果を得るために、オブザーバブルを関数として実行します。

<select data-bind="options: $root.selectedAreaFromDropList().Professions, 
                   optionsText: 'Name'"></select>

デモについては、このフィドルを参照してください。

于 2013-10-12T14:23:51.507 に答える