Emberjs - 将{{input}}过滤条与我的对象列表相关联.在我输入时,列表会过滤

Question

我正在尝试将此过滤搜索栏的工作示例http://jsbin.com/AViZATE/37/edit与我自己的项目合并.搜索栏似乎没有连接到我的对象列表.:(

让我告诉你我做了什么.

App.RecordCategoriesController = Ember.ArrayController.extend({
    searchResult: function(){
        var searchTerm = this.get('searchTerm');
        var regExp = new RegExp(searchTerm,'i');
        this.get('model').set('content',this.store.filter('recordCategory',function(item){
            return regExp.test(item.get('categoryName'));
        }));
    }.observes('searchTerm'),
});

正如您在上面所看到的,我已将' todo'与' recordCategory'和' title'替换为' categoryName'.到目前为止似乎很好.'

在record_categories.hbs中,我创建了将用于过滤的输入栏.

{{input type="text" id="search-todo" placeholder="Search Todo List..." value=searchTerm}}

然后在它下面,#each把手循环并显示我的列表

{{#each itemController="recordCategory"}}
  <li>{{categoryName}}</li>
{{/each}}

我错过了什么吗？我注意到searchResults似乎没有在他们的示例中的任何其他地方调用

这也是我的路线,因为为什么不.

App.RecordCategoriesRoute = Ember.Route.extend({     
    model: function() {
        VpcYeoman.RecordCategories.FIXTURES=[];
        $.ajax({
            url: '/recordCategories',
            dataType: 'json',
            type:"get",      
            async: false,
            success : function(data, textStatus, xhr) { 
                if(xhr.status==200){
                    VpcYeoman.RecordCategories.FIXTURES=data;
                }
            }
        });
        return this.store.find('recordCategories');
    }
}); 

Answer 1

我将尝试大多忽略JSBin并查看你拥有的内容,因为我认为这会对你有所帮助.所以,如果我想念JSBin中显而易见的东西,请告诉我.

首先要注意的是,从您的路线,您返回一个对象数组.Ember通常会ArrayController为你生成一个,但你自己已经扩展了.关于ArrayControllers 的特殊(和好的)是它们的内容是数组.所以在你的模板中,你可以这样做:

{{#each}}
    {{categoryName}}
{{/each}}

这将列出从中返回的所有项目this.store.find('recordCategories').

但是你想要过滤你的物品,这样做并不好.让我们继续讨论第二点.筛选项列表的最佳方法是使用只读计算属性.您绝对不希望将模型的内容设置为过滤的项目.您希望原始项目保持不变,并且过滤器只是查看原始项目的某种方式.所以,使用这里略微修改的例子,让我们这样做.

App.RecordCategoriesController = Ember.ArrayController.extend({

    searchResults: function() {
        var searchTerm = this.get('searchTerm');
        var regExp = new RegExp(searchTerm,'i');

        // We use `this.filter` because the contents of `this` is an array of objects
        var filteredResults = this.filter(function(category) {
            return regExp.test(category.get('categoryName'));
        });

        return filteredResults;
    }.property('@each.categoryName', 'searchTerm')

});

所以现在你有了一个计算属性,可以根据搜索词来过滤数组控制器中的项目.而且由于其依赖性,它会在项目发生变化或搜索项发生变化时重新进行重新计算.这样,您就不必更改任何模型值.最后,你会像这样使用它:

// record_categories.hbs

{{input type="text" id="search-todo" placeholder="Search Todo List..." value=searchTerm}}

{{#each searchResults}}
    {{categoryName}}
{{/each}}

为了确保我不是完全BSing,我创建了一个JSBin来表明它的工作原理.