如何使用ember.js按顺序过滤但保持数据绑定

时间:2014-08-25 01:46:40

标签: ember.js

延伸到这个问题How to properly setup a store that acts as a single pointer across your web app

我想对“getEverything”方法应用过滤器以按关联ID进行过滤(请参阅下面路线中的操作设置)

var PeoplePersonRoute = Ember.Route.extend({
    model: function(params) {
        var store = this.get('store');
        var person = Person.findById(store, params.person_id);
        var actions = Action.findByPerson(store, params.person_id);
        return Ember.RSVP.hash({person: person, actions: actions});
    },
    setupController: function(controller, hash) {
        controller.set('model', hash.person);
        controller.set('actions', hash.actions);
    }
});

findByPerson动作方法如下所示

findByPerson: function(store, person_id) {
    var everything = store.getEverything('action');
    return everything.filterBy('person_id', parseInt(person_id, 10));
}

当我在控制器中添加新的“动作”时,就像这样

var PeoplePersonController = Ember.ObjectController.extend({
    actions: {
        submit: function() {
            var person_id = this.get('model.id');
            var opened = this.get('opened');
            var newAction = Action.create({opened: opened, person_id: person_id});
            this.store.push('action', newAction);
        }
    }
});

它不会显示新添加的项目(直到我离开/返回)

如何修改find​​ByPerson方法以确保获得数据绑定数组?

1 个答案:

答案 0 :(得分:1)

老实说,我能想到的最简单的解决方案是根据所有模型创建一个计算属性。

var arr = Em.ArrayProxy.extend({
  source: model,
  content: function () {
    return this.get('source').filterBy('color', 'red');
  }.property('source.@each.color')
}).create();

由于您正在动态创建此属性,因此您可以使用完全不同的属性来观看,如果您想将这个想法扩展到此处显示的单个用例。

var person_id = parseInt(person_id, 10);

return Em.ArrayProxy.extend({
  source: undefined,
  content: function () {
    var filter_id = this.get('filter_id');
    return this.get('source').filterBy('person_id', filter_id);
  }.property('source.@each.person_id')
}).create({
  filter_id: person_id,
  source: everything
});

Ember Data略有不同。它们跟踪基于该类型过滤的所有集合。如果新的进入或离开商店,它们会触发对这些商品的更新。 (至少那是我上次看的时候)。

这是一个虚拟的例子:http://emberjs.jsbin.com/veqete/3/edit