Ember.js 如何为下拉组件添加事件以按选定项更改子域

我在ember cli中使用pod结构。我有一个“下拉”组件

在我的下拉列表.js组件中：

import Ember from 'ember';
  var component = Ember.Component.extend({
  tagName: '', //remove extra div wrapper.
  valueKey: 'id',
  textKey: 'text',
  options: [],
  value: null,
  defaultText: 'select...',
  selected: function () {
    var valueKey = this.get('valueKey');
    var textKey = this.get('textKey');
    var defaultText = this.get('defaultText');
    var fallbackOption = {};
    fallbackOption[valueKey] = 0;
    fallbackOption[textKey] = defaultText;

    if (Ember.isEmpty(this.get('value'))) {
      return fallbackOption;
    }

    var selected = this.get('options').findProperty(valueKey,this.get('value'));

    return selected ? selected : fallbackOption;
  }.property('options', 'value'),
  actions: {
    select(option) {
      var valueKey = this.get('valueKey');
      this.set('value', option[valueKey]);
    }
  }
});

export default component;

 <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 input-padding">
   {{drop-down options=model.countries
     value=country
     valueKey=valueKey
     textKey=textKey
     defaultText=defaultText}}
 </div>

我在索引中使用了这个组件来加载国家/地区

在template.hbs中用于索引：

import Ember from 'ember';
  var component = Ember.Component.extend({
  tagName: '', //remove extra div wrapper.
  valueKey: 'id',
  textKey: 'text',
  options: [],
  value: null,
  defaultText: 'select...',
  selected: function () {
    var valueKey = this.get('valueKey');
    var textKey = this.get('textKey');
    var defaultText = this.get('defaultText');
    var fallbackOption = {};
    fallbackOption[valueKey] = 0;
    fallbackOption[textKey] = defaultText;

    if (Ember.isEmpty(this.get('value'))) {
      return fallbackOption;
    }

    var selected = this.get('options').findProperty(valueKey,this.get('value'));

    return selected ? selected : fallbackOption;
  }.property('options', 'value'),
  actions: {
    select(option) {
      var valueKey = this.get('valueKey');
      this.set('value', option[valueKey]);
    }
  }
});

export default component;

 <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 input-padding">
   {{drop-down options=model.countries
     value=country
     valueKey=valueKey
     textKey=textKey
     defaultText=defaultText}}
 </div>

{{下拉选项=model.countries
价值=国家
valueKey=valueKey
textKey=textKey
defaultText=defaultText}

我想在国家下拉列表中添加更改事件，它必须按国家更改子域。例如，当我选择Iran时，其事件会导致我的子域更改为“Iran.site.com”。

---

如何添加此事件？我应该在哪里添加它呢？谢谢你可以向你的组件添加一个操作，当你选择一个选项时，你可以使用

sendAction

方法发送它

您的组件看起来像下面的代码。在这里，我添加了一个额外的属性

action=“countrySelected”

，其中countrySelected是在控制器或路由中定义的操作

{{drop-down options=model.countries
  value=country
  valueKey=valueKey
  textKey=textKey
  defaultText=defaultText
  action="countrySelected"
}}

现在，您需要修改组件代码中的

select

操作，如

select(option) {
  var valueKey = this.get('valueKey');
  this.set('value', option[valueKey]);
  this.sendAction('action', valueKey , option[valueKey]);
}

---

最后一行是相关行。您现在正在调用

countrySelected

操作，该操作可以在页面的控制器或路由中定义。

谢谢@blessenm，您能帮我了解一下子域吗？当我从下拉列表中选择“iran”时，我想将url“www.website.com”更改为“iran.website.com”。我该怎么做？好吧，改变子域就像去一个新网站。您可以使用window.location='iran.website.com'

{{drop-down options=model.countries
  value=country
  valueKey=valueKey
  textKey=textKey
  defaultText=defaultText
  action="countrySelected"
}}