如何为下拉组件添加事件以按所选项目更改子域

Question

我将 pod 结构与 ember cli 一起使用。我有一个 'drop-down' 组件。

在我的 drop-down.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;

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

in template.hbs 索引：

 <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>

我想向国家/地区下拉列表添加更改事件，它必须按国家/地区更改子域。例如，当我 select 伊朗时，它的事件导致我的子域更改为“Iran.site.com”。我怎样才能添加这个事件？我应该在哪里添加它？谢谢

Answer 1

您可以向您的组件添加一个动作，当您 select 一个选项时，您可以使用 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 操作。

如何为下拉组件添加事件以按所选项目更改子域

how to add event for drop-down component to change subdomain by selected item

subdomain

express

ember.js

ember-data

ember-cli