Question

有关于Ember Observers以及如何使用它们的问题。我对Ember很新，所以请原谅我，如果我的知识还不够。我遇到的问题是，我想要一个简单的文本字段，根据下拉菜单中的选择，填充特定的电子邮件地址。我在prepopulatedCounties数组中存储了一个值，但我不确定如何根据该值将email-address设置为text-field。

我有的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或更新版本）中的选择选项。

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

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

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

1 个答案: