什么是正确的emberjs方式来切换各种过滤选项？ [英] what is the right emberjs way to switch between various filtering options?

问题描述

我有一个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。 （$ @ 
}）; 
} .property（'@ each.living'，'@ each.votes_count'）。cacheable（），
 
 deceasedIndividuals ：function（）{
 return this.get（'content'）。filter（function（individual）{
 return（！individual.living）; 
}）。sort ，b）{
 return（b.votes_count  -  a.votes_count）; 
}）; 
} .property（'@ each。生活'，'@ each.votes_count'）。cacheable（）
 
}）; 
  

我的观点有一个individualBinding：App.individualStore.allIndividuals 。

我想添加过滤按钮，例如显示：全部|活着|死者。在这里更改过滤器的正确方法是什么？请记住，无论什么标准，我希望它始终与personalStore保持同步。

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

  this.bind（'users'，Ember.Binding.from（'App.individualStore.aliveIndividuals'））; 
  

这可以在我的这个按钮的第二个三点击中，但是它冻结浏览器无限循环？）。

这也不是我最好的选择。我是新来的，所以任何你说的将是有益的。感谢提前。

解决方案

我将使过滤器函数本身成为一个属性，并通过更改 filterName ，通知您，并相应更新过滤的内容，请参阅 http：// jsfiddle .net / pangratz666 / ypcLq /

  App.controller = Ember.ArrayProxy.create（{
内容：[]，
 
 filterName：'all'，
 
 allFilter：function（）{
 return true; 
}，
 aliveFilter：function（individual）{
 return（!! individual.living）; 
}，
 deceasedFilter：function（individual）{
 return（！individual.living）; 
 
 
过滤：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）所以你可以例如过滤一个特定年龄的所有活着的个人，...

I've an individualStore (extends from Em.ArrayController), whose task is to keep an array of individual objects. There are several APIs that my application calls, and they return individual objects which are sent to the store. Think about it as the database of cached individual records in my application.

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()

});

My view has a `individualsBinding: 'App.individualStore.allIndividuals', which renders up as intended perfectly.

I want to add filtering buttons, e.g. Show: All | Alive | Deceased. What would be the right way to change the filtering here? Keep in mind that whatever the criteria is, I'd like it to keep in sync with individualStore always.

Someone suggested to change bindings on runtime,

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

This works in my first two-three clicks on these buttons, but then it freezes the browser (sort of infinite loop?).

This also doesn't feel like the best option to me. I'm new to ember, so anything you say would be helpful. Thanks in advance.

解决方案

I would make the filter function itself a property and by changing a filterName on the controller, you are notified and accordingly update the filtered content, see 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()

});

So you can later in your view set the filter which shall be used via App.controller.set('filterName', 'alive').

Just as a note: you can chain filters via this.filter(filterFunc1).filter(filterFunc2) so you could for example filter all alive individuals of a specific age, ...

这篇关于什么是正确的emberjs方式来切换各种过滤选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！