Adding a model to a Marionette CollectionView's collection doesn't trigger onItemAdd callback

Question

So, I'm not sure I quite understand how this callback is supposed to be triggered. If you take a barebones model,collection and views:

PatchModel = Backbone.Model.extend({});

PatchCollection = Backbone.Collection.extend({model: PatchModel});

PatchView = Backbone.Marionette.ItemView.extend({template:'#patchview'});

PatchCollectionView = Backbone.Marionette.CollectionView.extend({
  itemView:PatchView
  ,onItemAdded: function(itemView){
    console.log("item was added");
  }
});

And instantiate them like this:

Patch0 = new PatchModel({});
Patch1 = new PatchModel({});
Patches = new PatchCollection();        

PatchesView = new PatchCollectionView({collection:Patches,el:"dom_id"});    

Patches.add(Patch0);
PatchesView.render();
Patches.add(Patch1);

The PatchesView onItemAdded callback never triggers. Hmm...

Dab

Just curious why are you adding empty models? – Solder

I cut out everything that wasn't necessary for the example and made sure it still failed the same way, before posting. – Dab

Answer 1

It looks like the docs are out of date. You should use onAfterItemAdded or onBeforeItemAdded

This was changed in v1.0.0-rc2

*BREAKING: * Changed the item:added event to before:item:added and after:item:added

Link

Here is a fiddle with your example reworked. http://jsfiddle.net/puleos/axJg4/

var PatchCollectionView = Backbone.Marionette.CollectionView.extend({
    itemView: PatchView,
    initialize: function() {
        _.bindAll(this);  
    },
    onAfterItemAdded: function(itemView){
        console.log("item was added");
    },
    onRender: function(){
        console.log("render");   
    }
});

Solder

I had the same thought. Looks like Derek already updated the docs but had them clobbered somehow. – Solder