Backbone custom event trigger not being recognised?

Question

I'm learning Backbone.js for the first time and I'm having an issue trying to get a custom event from triggering (or from the View from recognising when it's been triggered)?

You can see my Collection code here: https://github.com/Integralist/Backbone-Playground/blob/master/Assets/Scripts/App/main.js#L72-86 which when initialized it triggers a custom collection:init event.

var Contacts = Backbone.Collection.extend({
    model: Contact,

    initialize: function(){
        this.trigger('collection:init');
        this.bind('add', this.model_added, this);
    },

    model_added: function(){
        console.log('A new model has been created so trigger an event for the View to update the <select> menu');
    }
});

But later on in my View where I'm listening for that event I can't get the function populate to fire: https://github.com/Integralist/Backbone-Playground/blob/master/Assets/Scripts/App/main.js#L90-107

var ContactsView = Backbone.View.extend({
    initialize: function(){
        console.log(contacts.models, 'get initial model data and populate the select menu?');
    },

    events: {
        'collection:init': 'populate',
        'change select': 'displaySelected'
    },

    populate: function(){
        console.log('populate the <select> with initial Model data');
    },

    displaySelected: function (event) {
        console.log('get model data and display selected user', event);
    }
});

Any ideas what I'm doing wrong?

Answer 1

The events hash in a view is used to bind events from the DOM to your view, e.g. events raised by the elements in your rendered view. To listen to events raised by your collection, you will have to set them manually:

var ContactsView = Backbone.View.extend({
    initialize: function(){
        contacts.on("collection:init",this.populate,this);
    }
    ...
});

Note that you are using a global contacts variable, I would advise to use Backbone mechanisms and pass your collection to the constructor, as you do with the el:

var ContactsView = Backbone.View.extend({
    initialize: function(){
        console.log(this.collection.models);
        this.collection.on("collection:init",this.populate,this);
    }
    ...
});

var contacts_view = new ContactsView({
    el: $('#view-contacts'),
    collection:contacts
});

As @mu said in the comments, as is, your event won't do anything since you trigger it in the initialize method of the collection, which is automatically called by the constructor of the collection therefore before you can bind anything in the view. See this Fiddle to visualize the call order : http://jsfiddle.net/yRuCN/

Trigger it elsewhere, or, if I read correctly your intent, you (probably) want to use the built in reset event:

var ContactsView = Backbone.View.extend({
    initialize: function(){
        this.collection.on("reset",this.populate,this);
    }
    ...
});

See http://jsfiddle.net/yRuCN/1/ for an example with potential uses.