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

Question

有关于 Ember 观察者以及如何与他们一起工作的问题。我是 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 是一个很好的方法，但我还没有想出如何利用观察者，所以一些帮助在这种情况下完成将不胜感激！

Answer 1

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

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

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

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

Trigger observer based on changed selection in drop-down - Ember.js

html

javascript

observers

ember.js