Kann nicht binden Standardwert in Dropdown-Menü in knockoutJS

Question

Ich habe zwei Dropdown (PrimarySpeciality, PrimarySubSpeciality), basierend auf dem Wert in einem Dropdown (PrimarySpeciality) der andere Dropdown-Wert (PrimarySubSpeciality) sollte sich ändern.

Bei Laden möchte ich die 'PrimarySubSpecialities' beim Laden auf den Standardwert.

Wie kann ich es tun?

mein cshtml:

<div class="nmc-righttab" style="width:265px;"> 
    @Html.DropDownListFor(m => m.User.PSpecialty, Model.PSpecialties, new { id = "ddUserDetails", style = "width:245px;height:25px;", data_bind = "event: {change: primaryChanged}" }, Model.IsReadOnly) 
     </div> 
<div style="width:265px;"> 
    @Html.DropDownListFor(m => m.User.PSubSpecialty,Model.PSubspecialties, new { id = "ddUserDetailsPSubSpeciality", style = "width:245px;height:25px;", data_bind = "options: pSubSpecialities,optionsText: 'Name',optionsValue: 'Id',value:PSubspecialty,enable:isPSpecialitySelected" }) 
    </div> 

Meine JS-Datei:

this.PSubspecialty = ko.observable($('#ddUserDetails').val()); 
    this.pSubSpecialities = ko.observableArray([]); 
    this.isPSpecialitySelected = ko.observable(false); 

    this.pSpecilaityChanged = function() { 

     var pSpecialityVal = $("#ddUserDetails").val(); 
     if (pSpecialityVal) { 
      model.isPSpecialitySelected(true); 
      pStartIndex = 0; 
      pSubSpecialityUrl = '/User/GetSpec?pSpeciality=' + pSpecialityVal +'&sSpeciality='; 
      loadPSubSpecilaities(); 
     } 
     else 
     { 
      model.isSelected(false); 
     } 
    }; 

On Load, möchte ich für 'pSubSpeciality' Anfangswert setzen mit Wert Text als '<>' zu sein, wie ' 0 '.

Auch ich bin in der Lage, Artikel zu Model.PSubSpecialties hinzuzufügen, konnte aber nicht das hinzugefügte Element in Psbubspeciality Dropdown anzeigen.

Wie kann der Anfangswert von Model.PSubSpecialities auf pSubSpecialityDropdown gesetzt werden.

Answer 1

Arbeiten Sie in Ihrem Modell mehr und mit der Benutzeroberfläche weniger. Anstatt ein Ereignis changed für die DropDownList-Elemente zu erstellen, ändert subscribe Änderungen an einer value -gebundenen Variable. In Ihrem PrimarySpecialty DropDown,

data_bind = "value: primarySpecialty" 

Dann in Ihrem JS:

var self = this;  
this.primarySpecialty = ko.observable(); 
this.isPrimarySpecialtySelected = ko.pureComputed(function() { 
    return !!self.primarySpecialty(); 
}); 
this.primarySubSpeciality = ko.observable(); 
//... 
this.primarySpecialty.subscribe(function (newValue) { 
    if (newValue) { 
     loadPrimarySubSpecialities(); 
     this.primarySubSpeciality('0'); // Set default, by value 
    } 
}); 

Wenn die PrimarySubSpeciality Dropdown eine Option, deren Id Mitglied hat '0' ist, wird das Element darin ausgewählt werden.