Ember способ реализовать диалог поиска

Question

Я хочу реализовать простое приложение уголька, где у меня есть диалог поиска, список результатов и подробный вид, если я нажимаю на результатах, что-то вроде этого:

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

Метод поиска IndexController выполняет запрос ajax для заполнения модели, но я не уверен, что это лучший способ сделать это. Мне особенно не нравится часть var self = this;. Есть ли уродливый способ сделать этот поиск?

EDIT

Я обновил пример, теперь делаем в Ajax запроса и более реалистично:

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

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 на основе одного или нескольких фильтров, в комплекте с debounce для ограничения количества запросов:

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

У меня этот бег в дикой природе прямо сейчас, и он отлично работает.