什么是不同的过滤选项之间进行切换正确的方式emberjs？ [英] what is the right emberjs way to switch between various filtering options?

问题描述

我有一个individualStore（从Em.ArrayController延伸），其任务是保持各个对象的阵列。有迹象表明，我的应用程序调用几个API，它们返回被发送到商店单个对象。想想它作为缓存的个人记录在我的应用程序的数据库。

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

});

我的看法有一个`individualsBinding：App.individualStore.allIndividuals，这使得达如预期完美

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

我要添加过滤按钮，例如显示：所有|活着|死者。什么会改变这里过滤的正确方法吗？请记住，无论标准是，我想它保持同步与individualStore始终。

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.

推荐答案

我会做的过滤函数本身的特性，并通过改变一个 FILTERNAME 控制器上，你是通知并相应地更新过滤的内容，请参见 http://jsfiddle.net/pangratz666/ypcLq/

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

});

所以，你以后可以在视图设置哪些应当通过 App.controller.set使用的过滤器（'FILTERNAME'，'活着'）。

正如注意：您可以通过链过滤器this.filter（filterFunc1）.filter（filterFunc2）所以，你可以，例如过滤特定年龄的所有个人还活着......

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屋！