Question

假设我有一个代表人群的Backbone Relational模型 - 它有一个相关的People集合，每个模型类型为Person：

CrowdModel = Backbone.RelationalModel.extend({
     relations: [{
        type: Backbone.HasMany,
        key: 'People',
        relatedModel: 'PersonModel',
        collectionType: 'Backbone.Collection'
     }]
});

每个人都有一个相关的儿童集合，一个孩子也是模特类型的人：

PersonModel = Backbone.RelationalModel.extend({
    relations: [{
        type: Backbone.HasMany,
        key: 'Children',
        relatedModel: 'PersonModel',
        collectionType: 'Backbone.Collection'
    }]
});

现在，在我看来，我想听一个改变事件 - 让我们把它称为“饥饿” - 在任何一个模型上。

CrowdView = Backbone.View.extend({
    initialize: function () {
        this.listenTo(this.model.get("People"), 'change:Hungry', this.hungryChange);
    },
    hungryChange: function(model, val, options) {
       if(val) console.log("Somebody's hungry!");
    }
});

如果任何一个人都饿了，这将会激发，但我希望在视野中找到一种方法来听取任何一个孩子的饥饿事件。有没有办法冒泡起来？

jsfiddle here：http://jsfiddle.net/fnj58/1/

很抱歉这个人为的例子 - 这实际上与表示复选框树的模型有关，但是用这种方式描述会更容易。

Answer 1

你应该从人物中冒泡这个事件。

在CrowdView初始化函数中为childHungry添加处理程序

CrowdView = Backbone.View.extend({
          ....
  initialize: function () {
    this.listenTo(this.model.get("People"), 'childHungry', function(){
      console.log("Someone's child is hungry");
    });// listening to child hungry
    this.listenTo(this.model.get("People"), 'change:Hungry', this.hungryChange);
  },
});

个人模特应该倾听他的孩子，并引发他有一个孩子饿了

PersonModel = Backbone.RelationalModel.extend({
      .... 
  initialize: function(){
    this.listenTo(this.get("Children"), 'change:Hungry', this.childHungry);
  },
  childHungry: function(){
    this.trigger("childHungry");
  }

顺便说一句：如果你不希望群众区分饥饿的孩子或饥饿的人，你也可以触发改变：饥饿于上面的childHungry功能并保留你的版本CrowdView （见http://jsfiddle.net/fnj58/2/）

在Backbone视图中监听嵌套的Backbone Relational模型事件

1 个答案: