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

【问题标题】：Trigger observer based on changed selection in drop-down - Ember.js根据下拉列表中更改的选择触发观察者 - Ember.js
【发布时间】：2016-09-21 18:28:50
【问题描述】：

有一个关于 Ember Observers 以及如何使用它们的问题。我对 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 将是一个很好的方法，但我还没有弄清楚如何使用观察者，所以一些关于如何使用的帮助在这种情况下完成将不胜感激！

【问题讨论】：

标签： javascript html ember.js observers

【解决方案1】：

在 Ember（v1.13 或更高版本）中有一种更简单的方式来处理选择选项。

我删除了 value 字段并将电子邮件直接添加到您的对象中，您可以在此 Ember twiddle 中看到它。

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

【讨论】：

感谢您的回复，@Payam！是的，这看起来要简单得多。