Ember：全球可用的搜索组件（和操作）？

Question

我想在一个组件内有一个搜索字段，它可以放置在应用程序的任何位置。它可以出现在任何模板上，也可以嵌套在组件中。搜索表单将接受用户输入（搜索词），submit 将触发一个搜索操作，该操作将转换为结果模板。

看起来很简单，但我不知道如何让一个动作全局可用。如果可以的话，你如何首先将输入的术语传递给动作？令人惊讶的是，关于如何使用 Ember CLI 处理表单提交的信息很少。

到目前为止，我一直在提交带有 action='/results' 的常规表单。但这显然是在重新加载应用程序。

我一直在像这样在索引控制器中创建一个动作：

export default Ember.Controller.extend(defaultParams, {
    term: '',
    actions: {
        keywordSearch() {
            this.transitionToRoute('results', { queryParams: { q: this.get('term') }});
        }
    }
});

然后将关闭操作向下传递到我的搜索组件，该组件嵌套在索引模板的 2 层深处。

index.hbs:

{{index-search keywordSearch=(action "keywordSearch")}}

index-search.hbs（分量）：

{{search-field keywordSearch=keywordSearch }}

search-field.hbs（嵌套组件）：

<form {{ action (action keywordSearch) on='submit' }}>
{{ input value=term }}
<button type="submit">Search</button>
</form>

这将运行动作，但未提供 term。您如何向关闭操作提供 term？

而且...我真的需要将操作传递到搜索字段将出现在应用程序中的每个地方，还是有更简单的方法来做到这一点？

Answer 1

您可以创建一个搜索服务，而不是在所有组件和路由中编写操作。将服务注入组件并处理服务方法的路由转换。检查下面的示例代码，

搜索-component.hbs

<form {{ action (action search) on='submit' }}>
{{ input value=keyword }}
<button type="submit">Search</button>
</form>

搜索-component.js

export default Ember.Component.extend({

  globalSearch: Ember.inject.service('search'),

  actions: {
    search() {
      const { keyword } = this.getProperties('keyword');
      this.get('globalSearch').showResults(keyword).then(() => {
        alert('Success');
      }, (err) => {
        alert('Error while searching: ' + err.responseText);
      });
    }
  }

});

服务 - app/services/search.js

import Ember from 'ember';

export default Ember.Service.extend({

  init() {
    this._super(...arguments);
  },

  showResults(keyword) {
    // write code for transition to search results route here
  }
});

Ember：全球可用的搜索组件（和操作）？

Ember: globally-available search component (and action)?

ember.js

ember-cli