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语句和第二个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') });。类似以下内容：

JS：

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

HBS：

net::ERR_CONNECTION_RESET

优化emberjs过滤搜索

1 个答案: