Der ractive Wert wird nicht gesetzt, wenn die Auswahlliste zum ersten Mal geladen wird.

Question

Ich benutze Ractive und habe zwei Auswahllisten. In der ersten Auswahlliste kann der Benutzer sein Land auswählen. Wenn sie "US" auswählen, prüft Ractive dies und zeigt eine Liste von Zuständen an, in denen der Benutzer seinen Status auswählen kann. Beispiel:

<select value="{{country}}"> 
    <option value="CA">Canada</option> 
    <option value="US">USA</option> 
</select> 

{{#if country == 'US'}} 
    <select value="{{chosen_state}}"> 
     {{#states}} 
      <option value="{{this.state_name}}">{{this.state_name}}</option> 
     {{/}} 
    </select> 
{{/if}} 

Wenn dieses Formular zuerst geladen wird, ist "Canada" standardmäßig ausgewählt. Sobald der Benutzer "US" auswählt, erscheint die Staatenliste gut. Wenn ich jedoch versuche, den Wert von "selected_state" zu überprüfen, wird er auf "leer" anstatt auf den ersten Status in der Statusliste gesetzt. Nachdem ich den Status manuell geändert habe, wird dann und nur dann der Wert "selected_state" als Statuswert angezeigt.

Muss ich warten, bis das Änderungsereignis durch ein manuelles Ereignis ausgelöst wird, oder gibt es eine Möglichkeit, es so einzurichten, dass die Statusliste automatisch aktualisiert wird, wenn die Statusliste gerendert wird Zustand angezeigt? Es wäre schön, wenn bei der Wiedergabe kein Änderungsereignis für jede ausgewählte Liste ausgelöst werden müsste.

Answer 1

Es stellt sich heraus, dass dies eine fehlerhafte Überprüfung mit updateModel erfordert. Ich habe es so gemacht, wenn das Auswahlfeld geändert wird, löst es ein Ereignis aus, das updateModel auf der Instanz anruft, um das Feld selected_state zu prüfen.

Aktualisiert ausgewählten Code:

<select value="{{country}}" on-change="countrychange"> 
    <option value="CA">Canada</option> 
    <option value="US">USA</option> 
</select> 

{{#if country == 'US'}} 
    <select value="{{chosen_state}}"> 
     {{#states}} 
      <option value="{{this.state_name}}">{{this.state_name}}</option> 
     {{/}} 
    </select> 
{{/if}} 

Und in Ractive:

ractive.on('countrychange', function(event) { 

    this.updateModel(); 

}); 

Alternative Lösungen könnten gehören das Modell für Updates, um das Land zu beobachten läuft this.updateModel dann() sowie nur läuft updateModel auf dem erforderlichen Schlüsselpfad, der effizienter ist. http://docs.ractivejs.org/latest/ractive-updatemodel

:

Weitere Dokumentation zu diesem Thema finden Sie unter