Backbone.js `listento` 未触发过滤集合

Question

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

例如:

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')
  }
});

我在创建 View 时像这样传递过滤后的集合:

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 或 this.collection 监听添加的模型？

编辑:

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

注意提交代码:

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
});

Answer 1

我想你的 notes 全局集合在初始化时看起来像这样

var notes = new Notes();

所以这被传递给不同的 View 。

但是当你在过滤集合的时候

   var notesFilteredById = notes.filter_id(123);

   ...
   return new Notes(filtered);

您返回的是新笔记合集..

这会创建一个新实例，它与全局 notes 没有相同的绑定(bind)。

因此，要使其正常工作，您还必须明确地将创建的模型添加到过滤后的集合中。

像这样

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

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

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});
  }
});