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（component）：

{{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：全球可用的搜索组件（和行动）？

1 个答案: