Блог

Мне нужны некоторые идеи о том, как создать фильтр поиска в EmberJS, где результаты поиска могут сохраняться в разных представлениях. Допустим, у меня есть список контактов, и я отфильтровал список. Предположим, что этот маршрут вызывается Contacts/Index

Теперь у меня есть второй маршрут, который называется Contacts/Details . Пользователь будет перенаправлен на этот маршрут, как только он выберет результат из списка контактов. Теперь, когда они нажимают «Вернуться к контактам», я хочу, чтобы предыдущий фильтр по-прежнему применялся вместо отображения всех контактов.

Я еще не написал никакого кода, поэтому не могу предоставить JSFiddle. Все, о чем я могу думать сейчас, вероятно, это создать глобальную переменную для отслеживания текста, который используется для фильтрации, и применять его при переходе обратно к Contacts/Index представлению, но я не уверен, что это правильный способ сделать это.

Это всего лишь псевдокод, которому на самом деле все равно, какой у вас тип фильтра, но вы могли бы применить свойство filter к ContactsIndexController :

 App.ContactsIndexController = Ember.ArrayController.extend({
  //...
  filter: 'name=bro',
  filteredContent: function () {
    if(this.get('filter')){
      return this.get('content').filter//...;
    } else {
      return this.get('content');
    }
  }.property('filter')
  //...//
});
  

Всякий раз, когда вы меняете фильтр, обязательно обновляйте filter свойство:

 this.set('filter', 'foo=bar');
  

Затем в вашем шаблоне handlebars вы всегда перебираете filteredContent :

 {{#each filteredContent}}
{{/each}}
  

При переходе туда и обратно между Contacts внутренними маршрутами фильтр должен сохраняться при возврате к индексу.

Вы также можете увидеть, как этот шаблон можно использовать, чтобы сделать еще один шаг вперед и управлять фильтром буквально из любого места приложения. Если вы не находитесь в контексте этого контроллера, вы все равно можете обновить это свойство, и привязки соответствующим образом отобразят вычисляемое свойство при следующем посещении.

С другого контроллера:

this.set('controllers.contacts-index.filter', 'year=20x6')

Из маршрута:

this.controllerFor('contacts-index').set('filter', 'year=20x6')

Из представления в контроллере индекса:

this.set('controller.filter', 'year=20x6')

Я уверен, вы поняли идею.

Это, конечно, один из нескольких подходов, которые вы могли бы использовать. Я предпочитаю этот конкретный шаблон.

Надеюсь, это поможет и удачи!