KnockoutJS: Ausgewählte Option bei der Verwendung von foreach

Question

Ich benutze KnockoutJS, um ein Select-Steuerelement zu rendern, aber dafür verwende ich die ko foreach Bindung und nicht die Optionen verbindlich. Der Select-Bereich sieht im Moment so aus:

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

Also warum verwende ich nicht die Optionen verbindlich? Der Grund dafür ist, dass ich zwei Werte an den Server zurücksenden muss und nicht nur einen, bei dem nur die Verwendung des Wertfeldes nicht ausreichen würde. So unterhalb dieser Kontrolle habe ich 2 versteckte Felder, die wie folgt aussieht:

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

Dies alles wie erwartet funktioniert gut macht und gibt die richtigen Werte an den Server. Jetzt möchte ich jedoch einen Standardwert für das Auswahlfeld basierend auf einem Wert festlegen können, der an die Seite übergeben wurde, und ich kann nicht scheinen, dass dies funktioniert.

Ich habe versucht, wie dies entspricht einem Wert im beobachtbaren auf das Modell setzen:

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]); 
} 

leider tut dies keinen Unterschied, da, wenn die Seite zeigt es macht immer noch den Standard - ein Element auswählen - Option im Steuerelement und die 2 ausgeblendeten Felder haben immer noch den Wert 0. Beachten Sie jedoch, dass, wenn ich das Auswahlsteuerelement aus der Ansicht entferne und die Seite gerendert habe, bei den 2 ausgeblendeten Feldern die Standardelementwerte eingestellt sind, als ob die Steuerelement auswählen setzt das ausgewählte Element auf das erste Standardelement zurück.

Ich habe auch versucht, ein afterRender auf das Select-Steuerelement und die Ko Foreach, so dass ich das ausgewählte Element auf diese Weise nach dem Knockout Rendering beendet einstellen kann, aber ich laufe in das gleiche Problem und nichts hat sich geändert.

Jede Hilfe zu diesem Thema würde sehr geschätzt werden. Bitte lassen Sie mich wissen, wenn Sie möchten, dass ich in einem bestimmten Bereich detaillierter vorgehe, um das Problem zu lösen.

Answer 1

Ich habe ein paar Kommentare:

1. ViewModel.groups sollte ein observableArray sein.

2. versuchen, einen nicht beobachtbar defaultItem Parameter zu Ihrem Ansichtsmodell hinzu:

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

3. Eine 'Option' (Singular) Bindung existiert nicht. Aktualisieren Sie Ihre auf dem Optionen-Element zu binden, zu ändern ‚Option‘ auf ‚Wert‘, und fügen Sie diese ‚attr‘ Komponente:

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