Emberjs - 将{{input}}过滤条与我的对象列表连接起来。当我键入，列表过滤器 [英] Emberjs - Connecting an {{ input }} filter bar with my list of Objects. As I type, the list filters
问题描述
我正在尝试整合这个工作示例 http://jsbin.com / AViZATE / 37 /编辑的过滤搜索栏与我自己的项目。搜索栏似乎没有连接到我的对象列表。 ：（
让我告诉你我做了什么。
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'），
}）;
如上所示，我用' recordCategory替换了'和' todo 标题'与' categoryName '似乎很好， / p>
在record_categories.hbs中，我创建了将用于过滤的输入栏。
{{input type =textid =search-todoplaceholder =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，
成功：function（data，textStatus，xhr）{
if（xhr.status == 200）{
VpcYeoman.RecordCategories.FIXTURES = data;
}
}
}）;
return this.store.find（'recordCategories'）;
}
}）;
我将尝试大部分忽略JSBin看看你有什么，因为我认为这会帮助你更多。所以如果我想从JSBin中看到一些明显的东西，请告诉我。
首先要注意的是，从你的路由，你返回一个对象数组。 Ember通常会为您生成一个 ArrayController ，但您自己已经扩展了。而有关 ArrayController 的特殊（和很好）的东西是他们的内容是数组。所以在你的模板中，你可以这样做：
{{each 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'）;
//我们使用`this.filter`，因为`这是一个对象数组
var filteredResults = this.filter（function（category）{
return regExp.test（category.get（'categoryName'））;
}）;
return filteredResults;
} .property（'@ each.categoryName'，'searchTerm'）
}）;
所以现在你有一个计算属性，可以根据搜索过滤数组控制器中的项术语。并且由于其依赖，它将随着项目更改或搜索项变化而重新计算。这样，您就不必更改任何模型值。最后，您可以这样使用：
// record_categories.hbs
{{input type =textid =search-todoplaceholder =Search Todo List ...value = searchTerm}}
{{#each searchResults}}
{{categoryName} }
{{/ each}}
只是为了确保我没有完整的BSing，我创建了一个 JSBin ，以表明它有效。
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'),
});
As you can see above, I've replaced 'todo' with 'recordCategory' and 'title' with 'categoryName'. Seems good so far.'
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}}
and then below it, the #each handlebars to loop through and display my list
{{#each itemController="recordCategory"}}
<li>{{categoryName}}</li>
{{/each}}
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');
}
});
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.
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}}
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}}
And just to make sure that I wasn't completely BSing, I created a JSBin to show that it works.
这篇关于Emberjs - 将{{input}}过滤条与我的对象列表连接起来。当我键入，列表过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
