Emberjs - 将 {{ input }} 过滤器栏与我的对象列表连接起来.当我输入时，列表过滤器 [英] Emberjs - Connecting an {{ input }} filter bar with my list of Objects. As I type, the list filters

问题描述

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

I am trying to incorporate this working example http://jsbin.com/AViZATE/37/edit of a filtering search bar with my own project. The search bar does not seem to be connected to my list of objects. :(

让我告诉你我做了什么.

Let me show you what I've done.

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' 替换为 '类别名称'.到目前为止看起来不错.'

As you can see above, I've replaced 'todo' with 'recordCategory' and 'title' with 'categoryName'. Seems good so far.'

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

In record_categories.hbs i've created the input bar that will be used to filter.

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

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

and then below it, the #each handlebars to loop through and display my list

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

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

Am I missing something? I noticed that searchResults doesn't seem to be called anywhere else in their example

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

Also here is my route because why not.

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');
    }
}); 

推荐答案

我将尽量忽略 JSBin 并查看您拥有的内容，因为我认为这会对您有所帮助.因此，如果我遗漏了 JSBin 中的一些明显内容，请告诉我.

I'm going to try to mostly ignore the JSBin and look at what you have, as I think that will help you more. So if I miss something obvious from the JSBin, let me know.

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

First thing to notice is that, from your route, you return an array of objects. Ember would normally generate an ArrayController for you, but you've extended that yourself. And the thing that's special (and nice) about ArrayControllers is that their content is the array. So in your template, you could just do this:

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

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

And that would list all of the items that were returned from this.store.find('recordCategories').

但是你想过滤你的项目，所以这是不好的.那么让我们继续讨论第二点.过滤项目列表的最佳方法是使用只读计算属性.您绝对不想将模型的内容设置为过滤的项目.您希望原始项目保持完整，而过滤器只是查看原始项目的某种方式.因此，使用此处中的一个稍微修改的示例，让我们这样做.

But you want to filter your items, so that's no good. So let's move on to point two. The best way to filter a list of items is by using a read-only computed property. You definitely don't want to set the content of the model to the filtered items. You want the original items to remain intact, and the filter be just a certain way of looking at the original items. So, using a slightly modified example from here, let's do that.

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')

});

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

So now you've got a computed property that filters the items in the array controller based on the search term. And because of its dependancies, it will re-caclulate anytime the items change or the search term changes. And this way, you didn't have to change any model values. Finally, you'd use it like this:

// record_categories.hbs

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

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

为了确保我没有完全在胡说八道，我创建了一个 JSBin 表明它有效.

And just to make sure that I wasn't completely BSing, I created a JSBin to show that it works.

这篇关于Emberjs - 将 {{ input }} 过滤器栏与我的对象列表连接起来.当我输入时，列表过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！