KnockoutJS：foreachを使用しているときに選択されたオプション

Question

KnockoutJSを使用してSelectコントロールをレンダリングしていますが、オプション結合ではなくko foreachバインディングを使用しています。選択領域は現在次のようになっています：

<select class="form-control" data-bind="value: selectedItem">       
    <option>-- Select an Item --</option> 
    <!-- ko foreach: groups --> 
     <optgroup data-bind="attr: { label: name }, foreach: items"> 
      <option data-bind="text: name, option: $data"></option> 
     </optgroup> 
    <!-- /ko --> 
</select> 

なぜオプションバインディングを使用しないのですか？理由は、値のフィールドを使用するだけでは不十分な場合に、2つの値をサーバーに返す必要があるからです。すべては、正常に動作します。これは期待通りにレンダリングし、サーバに正しい値を渡し

<input type="hidden" name="Model.SelectItemId" data-bind="value: selectedItem().itemId" /> 
<input type="hidden" name="Model.SelectedItemTypeId" data-bind="value: selectedItem().itemTypeId" /> 

：このコントロールの下だから私はこのようになります2つの隠されたフィールドを持っています。しかし、今私は、ページに渡された値に基づいて選択フィールドにデフォルト値を設定する機能が必要です。これを動作させることはできません。

私はこのようなモデルに観測可能に値を設定しようとしました：

function ViewModel() { 
    ... 
    this.groups = ko.observable(getGroups()); 
    // Set selected to a hardcoded item just for now to test 
    this.selectedItem = ko.observable(this.groups()[0].items[1]); 
} 

ページをレンダリングするとき、それはまだデフォルトを示して以来、これは残念ながら違いはありません - 項目を選択 - コントロールのオプションと2つの隠しフィールドの値は0です。ただし、ビューから選択コントロールを削除してページをレンダリングすると、2つの非表示フィールドには既定のアイテム値が設定されているようになります。選択コントロールは、選択された項目を最初のデフォルト項目に戻します。

ノックアウトがレンダリングを完了した後に選択した項目をそのように設定できるように、selectコントロールとko foreachでafterRenderを設定しようとしましたが、同じ問題が発生して何も変更されませんでした。

この問題に関するお手伝いをさせていただきます。問題を解決するために、特定の地域についてより詳しく説明したい場合は、私にお知らせください。

Answer 1

私はいくつかのコメントがあります：

1. ViewModel.groupsはobservableArrayでなければなりません。あなたのViewModelに非観測可能defaultItemパラメータを追加

2. 試してみてください。存在しない結合

   function ViewModel() { 
       this.groups = ko.observableArray(getGroups()); 
       this.selectedItem = ko.observable(); 
       this.defaultItem = this.groups()[0].items[1]; 
   } 
   

3. アン 'オプション'（単数形）。あなたは、オプションの要素に結合「の値」と「オプション」を変更すると、この「attrの」コンポーネントを追加、更新：

   <option data-bind="text: name, 
       value: $data, 
       attr: { selected: ($data === $parents[1].defaultItem ? 'selected' : null) }"> 
   </option>