Question

我有以下自动完成组件： 来自EmberCasts的初步想法：Building an Autocomplete Widget Part 1

App.AutoCompleteComponent = Ember.Component.extend({
    searchText: null,

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

        console.log(this.get('model')); // shows array

        if (searchText){
            console.log('searching for: ' + searchText); // shows up in console with searchText

            var regex = new RegExp(searchText, 'i');
            model = model.filterBy('name', function(name) {
                console.log(name); // never got reached
                return name.match(regex);
            });
        }

        return model;
    }.property('searchText')
});

我的模板：

{{auto-complete model=controllers.categories}}

<script type="text/x-handlebars"s data-template-name="components/auto-complete">
    {{input type="text" value=searchText placeholder="Search..."}}
    <ul>
        {{#each searchResults}}
        <li>{{this}}</li>
        {{/each}}
    </ul>
</script>

问题是，没有返回任何模型项。在程序的初始状态显示我的所有类别 - 我将很快解决。但它告诉我自动完成组件确实有效。该模型最初会返回。我认为FilterBy不符合我的预期。

我尝试将FilterBy部分更改为此并准确搜索名称：

model = model.filterBy('name', searchText);

但这也行不通。有什么想法吗？

Answer 1

你的第二种方法是使用filterBy的正确方法，如果你想传递一个你会使用filter的函数。

model = model.filterBy('name', searchText);

我打赌你的模特上不存在名字，或者那些沿线的东西。如果您需要更多帮助，请向我们展示类别模型的示例。

http://emberjs.jsbin.com/oTIxAjI/1/edit

您需要使用过滤器

http://emberjs.jsbin.com/oTIxAjI/4/edit

Ember.js如何正确过滤组件中的模型

1 个答案: