优化emberjs过滤搜索

Question

我有一个简单的搜索输入,可以过滤通过html表中表示的api响应.过滤效果很好,但由于某些原因,我觉得这是一个非常难看的方式.所以我想知道什么是更好的方法.

这是我的控制器:

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

您可以更改控制器,以便在未输入搜索词时始终返回所有记录,并且仅filter在searchKeyword有文本时返回.然后在您的模板中,您可以删除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}}