ドロップダウンで変更された選択に基づくトリガーオブザーバー - Ember.js

Ember Observersとその操作方法について質問があります。私はEmberにとってとても新しいので、もし私の知識がまだあまりないのであれば、私を許してください。問題は、ドロップダウンメニューの選択に基づいて、特定の電子メールアドレスで簡単なテキストフィールドを埋めたいということです。私はprepopulatedCounties配列に値を格納しましたが、値に基づいて電子メールアドレスをテキストフィールドに設定する方法がわかりません。ドロップダウンで変更された選択に基づくトリガーオブザーバー - Ember.js

私は（アプリ/ routes.demo.js）が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', "[email protected]"); 
     } 
     else if(dataValue==="2"){ 
      this.set('currentModel.email', "[email protected]"); 
     } 
     else if (dataValue==="3"){ 
      this.set('currentModel.email', "[email protected]"); 
     } 
     else if (dataValue==="4"){ 
      this.set('currentModel.email', "[email protected]"); 
     } 
     else if (dataValue==="5"){ 
      this.set('currentModel.email', "[email protected]"); 
     } 
     else{ 
      this.set('currentModel.email', "None Selected"); 
     } 
    }

私が持っているHTMLコード（アプリ/テンプレート/ 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>

<select {{action 'setEmail' on='change'}}>行を最近追加したときにドロップダウンが機能しなくなったように、私は正しくsetEmailアクションを設定していません。私はこの仕事をする方法を探しています。私はEmber Observersが良い方法だと読んだことがありますが、Observersをどのように利用するかをまだ分かっていないので、このシナリオでは非常に高く評価されます！

出典

2016-05-24 LearningJS888