Auslöserbeobachter basierend auf geänderter Auswahl im Dropdown - Ember.js

Question

Haben Sie eine Frage über Ember Observer und wie man mit ihnen arbeitet. Ich bin sehr neu in Ember, also verzeih mir, wenn mein Wissen noch nicht ganz da ist. Das Problem, das ich habe, ist, dass ich möchte, dass ein einfaches Textfeld mit einer bestimmten E-Mail-Adresse gefüllt wird, basierend auf einer Auswahl aus einem Drop-Down-Menü. Ich habe einen Wert im prepopulatedCounties Array gespeichert, bin aber nicht sicher, wie ich die E-Mail-Adresse basierend auf dem Wert auf das Textfeld einstellen soll.

Der JS-Code Ich habe (app/routes.demo.js):

export default Ember.Route.extend({ 

    model() { 
    var prepopulatedCounties = Ember.A(); 
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "1", display: "Charlotte" })); 
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "2", display: "Collier" })); 
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "3", display: "Hillsborough" })); 
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "4", display: "Lee" })); 
    prepopulatedCounties.pushObject(Ember.Object.create({ value: "5", display: "Manatee" })); 

return Ember.Object.create({ 
    counties  : prepopulatedCounties, 
    selectedCounty : undefined, 
    email   : undefined, 
}); 
    }, 


actions: { 
setEmail() { 
     var dataValue = this.get('currentModel.selectedCounty'); 

     if(dataValue==="1"){ 
      this.set('currentModel.email', "first@email.com"); 
     } 
     else if(dataValue==="2"){ 
      this.set('currentModel.email', "second@email.com"); 
     } 
     else if (dataValue==="3"){ 
      this.set('currentModel.email', "third@email.com"); 
     } 
     else if (dataValue==="4"){ 
      this.set('currentModel.email', "forth@email.com"); 
     } 
     else if (dataValue==="5"){ 
      this.set('currentModel.email', "fifth@email.com"); 
     } 
     else{ 
      this.set('currentModel.email', "None Selected"); 
     } 
    } 

Der HTML-Code Ich habe (app/templates/demo.hsb):

<div> 
     <br> 
     Email: 
     <br> 
     {{input type="text" id="mail" value=model.email readonly='readonly'}} 
    </div> 
    <div> 
     <br> 
     Counties: 
     <br> 

     <select {{action 'setEmail' on='change'}}> 
     {{#x-select value=model.selectedCounty as |xs|}} 
      {{#xs.option value="0"}}Choose One{{/xs.option}} 
      {{#each model.counties as |county|}} 
      {{#xs.option value=county.value}}{{ county.display }}{{/xs.option}} 
      {{/each}} 
     {{/x-select}} 
     </select> 
    </div> 

Ich habe die Aktion nicht richtig eingerichtet, als ich vor kurzem die <select {{action 'setEmail' on='change'}}> Zeile hinzugefügt habe, hörte das Dropdown auf zu funktionieren, da ich sicher bin, dass ich es falsch gemacht habe. Ich suche nach einer Möglichkeit, dies zum Laufen zu bringen, und ich habe gelesen, dass Ember Observers ein großartiger Weg wäre, aber ich habe noch nicht herausgefunden, wie man Beobachter einsetzt, also helfen einige mit, wie das gemacht wird in diesem Szenario würde sehr geschätzt werden!

Answer 1

Es gibt eine viel einfachere Möglichkeit, mit ausgewählten Optionen in Ember (v1.13 oder neuer) umzugehen.

Ich entfernte das Wertfeld und fügte E-Mail direkt zu Ihrem Objekt hinzu, Sie können es hier bei diesem Ember-Twiddle sehen.

https://ember-twiddle.com/d49b18538aca70dafcb5d9070eb6a98c?fileTreeShown=false&numColumns=3&openFiles=routes.application.js%2Croutes.application.js%2Ccontrollers.application.js