Question

我想实现简单的ember应用程序，我有一个搜索对话框，一个结果列表和一个详细的视图，如果我点击结果，如下所示：

IndexController的搜索方法正在执行ajax请求来填充模型，但我不确定这是否是最好的方法。我特别不喜欢var self = this;部分。有没有一种方法可以进行搜索？

修改

我更新了示例，现在正在执行ajax请求并且更加真实：

Answer 1

ajax调用应该在model路由的Index挂钩内发生。而不是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}}

工作解决方案here

Answer 2

根据我对另一个答案的评论，我建议基于一个或多个过滤器的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', '');
    }
  }
});

我现在正在野外跑步，它完美无缺。

Ember方式实现搜索对话框

2 个答案: