3

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または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
});
4

1 に答える 1