CODEWITHSUNDEEP
javascriptbackbone.jsmarionette
Alexus
Alexus

Reputation: 1973

Marionette - listenTo a custom event triggered from a collection

I'm using a Event Aggregator(EA) to keep track of all events in my app. But there is one situation I could not make the EA listen to a custom event triggered from a collection. See more details below.

eMgr (Event Manager i.e Event aggregator):

define(['backbone.wreqr'],function(Wreqr){
    "use strict";
    return new Wreqr.EventAggregator();
})

collection:

define([ 'underscore',  'backbone', 'eMgr', 'models/MainMenu/MM.model.category'], function(_, Backbone, eMgr, m_Category){
  var CategoriesCollection = Backbone.Collection.extend({
    model: m_Category,

    initialize: function(options) {
        console.log('CategoriesCollectionView initialized...');
        this.url= 'test1';
        this.fetch().then(function(){
            eMgr.trigger("test1")
        })
    }

  });

  return CategoriesCollection;
});

LayoutView:

define([ 'backbone', 'underscore', 'marionette', 'eMgr',
            'templates/template.mainmenu', 
            'collections/MainMenu/MM.collection.categories',
            'layouts/MainMenu/collectionview.categories'    ],
    function (Backbone, _, Marionette, eMgr, template, c_Categories, cv_Categories) {
    "use strict";
    var CategoryLayoutView = Marionette.LayoutView.extend({

        template: template['categories.layout'],

        regions: {
            categories : '#categories'
        },

        id: 'categories-layout',

        initialize: function(options){
            var r_categories = this.categories;
            this.listenTo(eMgr, "test1", this.test);
            this.categories = new c_Categories(options)
        },

        test: function(){
            console.log("test");
            var categories_layout = new cv_Categories({ collection: this.categories});
            categories_layout.render()
        },

        onRender: function(){
        },

        onShow: function(){

        }
    });

    return CategoryLayoutView;
});

As you can see above, what I'm trying to achieve is to render the CollectionView (cv_Categories) once the collection has finished loading all the data.

However it doesn't work unless I listen to the events as follows: 

eMgr.listenTo(eMgr, "test1", this.test);

This will trigger the function , although I'm no longer able to access my LayoutView's methods/variables and so on. So I can't access my collection, and therefore not able to initiate my CollectionView properly.

Now the question is, am I doing anything wrong or does it all work as intended? Is there any other way to accomplish this?

Upvotes: 0

Views: 1273

Answers (1)

MiguelSR
MiguelSR

Reputation: 166

You could do eMgr.on("test1", this.test, this) to execute this.test with this as context (note third parameter).This way you keep the access to your view "this" scope and therefore to your view's functions.

If you prefer to use listenTo, then you could do eMgr.listenTo(eMgr, "test1", this.test.bind(this)). I find it more redundant and unnecesarily verbose, though.

Upvotes: 1

Related Questions