Question

I have two Apps:

A SrvLinkApp that has a Link Model (a sockjs connection to the server).
A ChatApp that has a chatView view, a ChatEntry Model, and a ChatCollection.

When I receive a msg form the server I trigger a ‘chat:server:message’, payload event with:

App.vent.trigger('chat:server:message', payload)

In my ChatApp I listen for this event, transform the payload into a ChatEntry and then add it to the ChatCollection witch is referenced by the ChatView.

Where should I add the binding? I only have the reference to the collection in the initialize part:

App.vent.bind("chat:server:msg", function(msg) {})

Plan A

Foo.module("ChatApp", function(ChatApp, App, Backbone, Marionette, $, _) {

App.addRegions({
    chatRegion: "#chat-region",
});


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


MsgCollection = Backbone.Collection.extend({
    model: MsgEntry
})


MsgView = Backbone.Marionette.ItemView.extend({
    template: '#chat-entry-template',
});

MsgListView = Backbone.Marionette.CompositeView.extend({

    itemView: MsgView,

    itemViewContainer: "#chat-messages",

    template: "#chat",

     ....
});


ChatApp.addInitializer(function() {

   var msgCollection = new MsgCollection();
   var msgListView = new MsgListView({collection: msgCollection});

   // render and display the view
   App.chatRegion.show(msgListView);


   // App Events listeners
   // --------------------

   // New chat message from server 
    App.vent.bind("chat:server:msg", function(msg) {
        // create an entry and add it to our collection
        console.log(msgCollection);
    });


});
});

or Plan B

Foo.module("ChatApp", function(ChatApp, App, Backbone, Marionette, $, _) {

App.addRegions({
    chatRegion: "#chat-region",
});


// App Events listeners
// --------------------

// New chat message from server 
App.vent.bind("chat:server:msg", function(msg) {
   // create an entry and add it to our collection
   console.log(ChatApp.msgCollection);
});


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


MsgCollection = Backbone.Collection.extend({
    model: MsgEntry
})


MsgView = Backbone.Marionette.ItemView.extend({
    template: '#chat-entry-template',
});

MsgListView = Backbone.Marionette.CompositeView.extend({

    itemView: MsgView,

    itemViewContainer: "#chat-messages",

    template: "#chat",

     ....
});


ChatApp.addInitializer(function() {

   var msgCollection = new MsgCollection();
   var msgListView = new MsgListView({collection: msgCollection});

   // HERE //
   ChatApp.msgCollection = msgCollection;
   // END HERE //

   App.chatRegion.show(msgListView);
});
});

Or is there other ways to access the collection ?

Answer 1

I don’t think either of these is bad. I use both ideas at various times. It largely depends on other circumstances within your app, what the possibilities of are of having multiple collections to deal with, etc.

Personally, I’d go with A because it keeps everything within the module, and doesn’t leave the collection open to getting clobbered or forgotten about (memory leak) on the global app object.