Backbone.js `listento` 不会针对过滤后的集合触发

listento仅针对全局集合触发，而不是我在创建视图时传递给视图的集合。

例如：

var MyView = Backbone.View.extend({
  initialize: function() {
    this.listenTo(notes, "add", this.test);  // <--- THIS FIRES
    this.listenTo(this.collection, "add", this.test); // <-- THIS DOES NOT FIRE
  },

  test: function() {
    console.log('model added to collection')
  }
});

我在创建视图时传递过滤后的集合，如下所示：

var notesFilteredByGroup = notes.filter_group(123);
var myView = new MyView({
  collection: notesFilteredByGroup
});

这是Notes收藏：

Notes = Backbone.Collection.extend({
  url: '/notes',

  model: Note,

  filter_group: function(groupNum) {
    filtered = this.filter(function(note) {
      return note.get('groupNum') === groupNum;
    });
    return new Notes(filtered);
  }
});

当我提交新笔记时，它会很好地更新全局集合。我该如何告诉notesFilteredById or this.collection监听添加的模型？

EDIT:

添加了请求的代码，更改了一些变量名称以使问题更清晰

注意提交代码：

var AddNoteView = Backbone.View.extend({
  tagName: 'div',

  template: _.template( AddNoteTemplate ),

  events: {
    'click #noteSubmitButton': 'submit'
  },

  initialize: function() {
    this.render();
  },

  render: function() {
    var template = this.template( this.model.toJSON() );
    this.$el.html(template);
    return this;
  },

  submit: function(event) {
    event.preventDefault();

    var newNote = {
      text: $('#text').val(),
      groupNum: $('#groupNum').val(),
    };

    this.collection.create(newNote, {wait: true});
  }
});

实例化 AddNoteView：

var notes = new Notes;
notes.fetch();
var addNoteView = new AddNoteView({
  collection: notes
});

我想你的notes初始化时的全局集合如下所示

var notes = new Notes();

所以这被传递给不同的观点。

但是当你过滤集合时

   var notesFilteredById = notes.filter_id(123);

   ...
   return new Notes(filtered);

您正在返回一个新笔记收藏..

这将创建一个新实例，该实例不具有与全局相同的绑定notes.

因此，为了使其工作，您还必须显式地将创建的模型添加到过滤后的集合中。

像这样的东西

// You need to pass that into the view
var addNoteView = new AddNoteView({
  collection: notes,
  filteredCollection : notesFilteredByGroup
});

在视图中，您需要将其显式添加到其他集合中

var AddNoteView = Backbone.View.extend({
  tagName: 'div',

  template: _.template( AddNoteTemplate ),

  events: {
    'click #noteSubmitButton': 'submit'
  },

  initialize: function() {
    this.listenTo(this.collection, 'add', addToCollection);
    this.render();
  },

  render: function() {
    var template = this.template( this.model.toJSON() );
    this.$el.html(template);
    return this;
  },
  addToCollection : function(model) {
      // Need to add to the other collection.
      this.options.filteredCollection.add(model);
  },
  submit: function(event) {
    event.preventDefault();

    var newNote = {
      text: $('#text').val(),
      groupNum: $('#groupNum').val(),
    };

    this.collection.create(newNote, {wait: true});
  }
});