优化emberjs过滤器搜索

Optimizing emberjs filter search

本文关键字：搜索 过滤器 emberjs 优化      更新时间：2023-09-26

我有一个简单的搜索输入，它通过一个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语句?我还应该让这个组件正确吗?

你可以改变你的控制器，所以你总是返回所有的记录时，没有搜索项输入，只有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}}
相关文章：