在各种过滤选项之间切换的正确 emberjs 方式是什么？

Question

我有一个 individualStore（从 Em.ArrayController 扩展），它的任务是保存一个单独的对象数组。我的应用程序调用了几个 API，它们返回发送到商店的各个对象。将其视为我的应用程序中缓存的单个记录的数据库。

App.individualStore = App.ArrayController.create({

  allIndividuals: function () {
    return this.get('content').sort(function (a, b) {
      return (b.votes_count - a.votes_count);
    });
  }.property('@each.votes_count').cacheable(),

  aliveIndividuals: function () {
    return this.get('content').filter(function (individual) {
      return (!!individual.living);
    }).sort(function (a, b) {
      return (b.votes_count - a.votes_count);
    });
  }.property('@each.living', '@each.votes_count').cacheable(),

  deceasedIndividuals: function () {
    return this.get('content').filter(function (individual) {
      return (!individual.living);
    }).sort(function (a, b) {
      return (b.votes_count - a.votes_count);
    });
  }.property('@each.living', '@each.votes_count').cacheable()

});

我的视图有一个 `individualsBinding: 'App.individualStore.allIndividuals'，它按预期完美呈现。

我想添加过滤按钮，例如Show: All | Alive | Deceased。在这里更改过滤的正确方法是什么？请记住，无论标准是什么，我都希望它始终与 individualStore 保持同步。

有人建议在运行时更改绑定，

this.bind('users', Ember.Binding.from('App.individualStore.aliveIndividuals'));

这在我前两三次单击这些按钮时有效，但随后它冻结了浏览器（有点像无限循环？）。

这对我来说也不是最好的选择。我是 ember 的新手，所以你说的任何内容都会有所帮助。提前致谢。

Answer 1

我会让过滤器函数本身成为一个属性，通过更改控制器上的filterName，您会收到通知并相应地更新过滤后的内容，请参阅http://jsfiddle.net/pangratz666/ypcLq/

App.controller = Ember.ArrayProxy.create({
    content: [],

    filterName: 'all',

    allFilter: function() {
        return true;
    },
    aliveFilter: function(individual) {
        return ( !! individual.living);
    },
    deceasedFilter: function(individual) {
        return (!individual.living);
    },

    filtered: function() {
        var filterName = this.get('filterName');
        var filterFunc = this.get(filterName + 'Filter');

        return this.filter(filterFunc).sort(function(a, b) {
            return (b.votes_count - a.votes_count);
        });
    }.property('content.@each', 'filterName').cacheable()

});

因此您可以稍后在您的视图中设置过滤器，该过滤器将通过App.controller.set('filterName', 'alive') 使用。

请注意：您可以通过this.filter(filterFunc1).filter(filterFunc2) 链接过滤器，例如，您可以过滤特定年龄的所有活着的人，...