优化 emberjs 过滤器搜索

Question

我有一个简单的搜索输入，它通过 api 响应进行过滤，该响应在 html table 中表示。过滤效果很好，但出于某些原因，我觉得这是一种非常丑陋的方式。所以我想知道什么是更好的方法。

这是我的控制器：

export default Ember.ArrayController.extend({
    searchKeyword: null,

    searchResults: function(){
        var searchText = this.get('searchText');

        if( ! searchText) return;

        //YOUVE ALREADY GOT THE COMPANIES DONT GO BACK TO THE SERVICE
        var companies =  this.get('model');

        var regex = new RegExp(searchText, 'i');

        return companies.filter(function(company){
            return company.name.match(regex);
        });
    }.property('searchText', 'model')
});

这是我的路线：

export default Ember.Route.extend(AuthenticatedRouteMixin, {
    model: function(){
        var adapter = AddressBookHomeAdapter.create();
        var companies =  adapter.findAll();
        return companies;
    }
});

这是我的适配器（我没有使用 Ember-Data）：

export default Ember.Object.extend({
    findAll: function(){
        return ajax('http://localhost:8000/api/v1/companies')
            .then(function(response){
                return response.data;
            });
    }
});

这是非常丑陋的（我认为）html {{#each}}:

    {{#if searchResults}}
        {{#each searchResult in searchResults}}
            <tr>
                <td>{{searchResult.name}}</td>
            </tr>
        {{/each}}
    {{else}}
        {{#each m in model}}
            <tr>
                <td>{{m.name}}</td>
            </tr>
        {{/each}}
    {{/if}}

有没有办法直接过滤模型路由？所以我不需要必要的 if 语句？另外我应该让这个组件正确吗？

Answer 1

您可以更改您的控制器，以便在未输入搜索词时总是 return 所有记录，并且在 searchKeyword 有文本时仅 filter 记录。然后在您的模板中，您可以删除 if 语句和第二个 each。与以下内容相似：

js:

export default Ember.ArrayController.extend({

    searchKeyword: null,

    searchResults: function() {

        var searchKeyword = this.get('searchKeyword'),
            companies     = this.get('model');

        if (Ember.isEmpty(searchKeyword)) return companies;

        var regex = new RegExp(searchKeyword, 'i');

        return companies.filter(function(company){
            return company.name.match(regex);
        });

    }.property('searchKeyword', 'model')
});

hbs:

{{#each searchResult in searchResults}}
<tr>
    <td>{{searchResult.name}}</td>
</tr>
{{/each}}

优化 emberjs 过滤器搜索

Optimizing emberjs filter search

javascript

ember.js

ember-cli