Ember方式来实现搜索对话框
我想实现简单的应用程序，我有一个搜索对话框，一个结果列表和一个详细的视图，如果我点击结果，像这样：
http://jsbin.com/tuyapabuhe/2/edit
IndexController的搜索方法正在执行ajax请求来填充模型，但我不确定这是否是最好的方式。 我特别不喜欢var self = this; 部分。 有没有一种烬子的方式来做这个搜索？
编辑
我更新了这个例子，现在正在做一个Ajax请求，并且更加真实：
http://jsbin.com/wimogu/4/edit
ajax调用应该在Index路由的model钩子内发生。 而不是observes你可以使用如下property ：
App.IndexRoute = Ember.Route.extend({
model: function(){
return data; // your ajax call here...
}
});
App.IndexController = Ember.ArrayController.extend({
filtered: function() {
var name = this.get('name') || '';
var people = data.filter(function(el){
if(el.name.toLowerCase().indexOf(name)>-1)
return el;
});
return people;
}.property('name', 'model')
});
然后，在你的模板中，你可以做
{{#each user in filtered}}
{{#link-to 'person' user.id}}
<div>{{user.name}}</div>
{{/link-to}}
<hr/>
{{/each}}
工作解决方案
根据我对另一个答案的评论，我会建议基于一个或多个过滤器的AJAX调用的以下内容，并完成反删除以限制请求数量：
function handleSearch() {
this.set('model', this.store.find('user', this.get('query')));
}
App.IndexController = Ember.Controller.extend({
search: '',
sort: 'first_name',
direction: 'asc',
query: function() {
return {
search: this.get('search'),
sort: this.get('sort'),
direction: this.get('direction')
};
}.property('search'),
queryDidChange: function() {
Ember.run.debounce(this, handleSearch, 200);
}.observes('query').on('init'),
actions: {
clearSearch: function() {
this.set('search', '');
}
}
});
我现在在野外运行，它完美运行。
链接地址: http://www.djcxy.com/p/65817.html