Ember way to implement a search dialog

I want to implement simple ember app, where I have a search dialog, a list of results and a detailed view if I click on the results, something like this:

http://jsbin.com/tuyapabuhe/2/edit

The search method of the IndexController is doing an ajax request to populate the model, but I'm not sure if that is the best way to do it. I specially don't like the var self = this; part. Is there an ember way to do that search?

EDIT

I updated the example, now is doing an ajax request and is more realistic:

http://jsbin.com/wimogu/4/edit

---

The ajax call should be happening inside the model hook for the Index route. Instead of observes you can just use a property as follows:

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

Then, in your template you can just do

{{#each user in filtered}}
   {{#link-to 'person' user.id}}   
   <div>{{user.name}}</div>
   {{/link-to}}
  <hr/>
{{/each}}

Working solution here

---

Per my comment on another answer, I would suggest the following for AJAX calls based on one or more filters, complete with debouncing to limit the number of requests:

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

I have this running in the wild right now and it works perfectly.

链接地址: http://www.djcxy.com/p/65818.html

上一篇: Ember 2最佳实践

下一篇: Ember方式来实现搜索对话框