根據下拉菜單中的更改選擇觸發觀察器-Ember.js

Question

有一個關於灰燼觀察者以及如何與他們合作的問題。 我是Ember的新手，如果我還不了解我，請原諒。 我遇到的問題是，我希望基於一個下拉菜單中的選擇，以一個簡單的文本字段填充特定的電子郵件地址。 我在prepopulatedCounties數組中存儲了一個值，但是不確定如何根據該值將電子郵件地址設置為文本字段。

我擁有的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', "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");
      }
    }

我擁有的HTML代碼（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>

我沒有正確設置setEmail操作，因為當我最近添加<select {{action 'setEmail' on='change'}}>行時，該下拉列表停止運行，因為我確定我做到了錯誤地。 我正在尋找一種實現此目的的方法，並且我已經讀到Ember Observers是一個不錯的選擇，但是我還沒有弄清楚如何利用Observers，因此在如何使用Observers方面有所幫助在這種情況下完成將不勝感激！

Answer 1

在Ember（v1.13或更高版本）中，有一種更簡單的方法來處理選擇選項。

我刪除了值字段，並直接向您的對象添加了電子郵件，您可以在此Ember旋轉中看到它。

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