根据更改后的选择下拉列表触发观察者 - Ember.js

有一个关于Ember Observers的问题以及如何使用它们。我对Ember很新，所以如果我的知识尚未到位，请原谅我。我遇到的问题是，我想根据从下拉菜单中选择一个简单的文本字段来填充特定的电子邮件地址。我在prepopulatedCounties数组中存储了一个值，但不知道如何根据该值将email-address设置为文本字段。根据更改后的选择下拉列表触发观察者 - Ember.js

JS代码我有（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', "[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>

我没有正确设置setEmail操作，因为当我最近添加<select {{action 'setEmail' on='change'}}>行时，下拉菜单停止工作，因为我确信我没有正确操作。我正在寻找一种方法来完成这项工作，并且我读过Ember Observers将是一个很好的方法，但我还没有弄清楚如何利用观察者，所以有些人会帮助完成这项工作。在这种情况下，将不胜感激！

来源

2016-05-24 LearningJS888