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，但你自己已经扩展了ArrayController。关于{{#each}} {{categoryName}} {{/each}} s的特殊（和好的）是他们的内容是数组。所以在你的模板中，你可以这样做：

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') });返回的所有项目。

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

// record_categories.hbs

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

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

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

{{1}}

为了确保我没有完全成功，我创建了一个JSBin来证明它有效。

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

1 个答案: