在EmberJS中创建过滤器 - 概念

时间:2014-07-06 07:46:00

标签: javascript ember.js

我需要一些关于如何在EmberJS中创建搜索过滤器的想法,其中搜索结果可以跨视图保持不变。假设我有一个联系人列表,我过滤了列表。假设此路由被称为Contacts/Index

现在我有一条名为Contacts/Details的第二条路线。一旦用户从联系人列表中选择结果,就会将用户定向到此路线。现在,当他们点击“返回联系人”时,我希望仍然应用之前的过滤器,而不是显示所有联系人。

我还没有写任何代码,所以我不能提供JSFiddle。我现在可以想到的可能是创建一个全局变量来跟踪用于过滤和应用的文本,当转换回Contacts/Index视图但我不确定它是否是正确的方式这样做。

1 个答案:

答案 0 :(得分:1)

这只是伪代码,它并不真正关心您的过滤器类型,但您可以将过滤器属性应用于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');

然后在你的手柄模板中,你总是循环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')

我确定你明白了。

当然,这是您可以采取的几种方法之一。我更喜欢这种特殊模式。

希望有所帮助,祝你好运!