Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is a good method for sending a message from a Child view to its parent Collection view in Backbone.js or Marionette.js?

What is a good method for sending a message from a Child view to its parent Collection view in Backbone.js or Marionettejs?

Normally I send the message through the collection:

ChildView = Backbone.Marionette.ItemView.extend({
     send_message: function(){
          this.model.collection.trigger('some-message');
     }
})

ParentCollectionView = Backbone.Marionette.CollectionView.extend({
     // ON RENDER
     onRender: function(){
          this.listenTo(this.collection, 'some-message', this.do_something);
     }
     // DO SOMETHING
     do_something: function(){
          alert('did something');
     }
});

I think this is not right because:

  • I'm sending the message from the child view, through the data, back to the parent view
  • In this instance, the message does not relate to the data, its strictly message passing between views about view stuff
  • The model could belong to more than one collection

Instead, I would like to send a message directly from a child view to its parent collection view. (actually, I'm using a composite view, not sure if that matters, wanted to keep the example simple though).

like image 867
Chris Dutrow Avatar asked Jan 23 '16 21:01

Chris Dutrow


1 Answers

Either have the child view directly emit the event and have the parent listen for it :

ChildView = Backbone.Marionette.ItemView.extend({
     send_message: function(){
          this.trigger('some-message');
     }
})

ParentCollectionView = Backbone.Marionette.CollectionView.extend({
     // ON RENDER
     onRender: function(){
          // no idea how Marionette references its children views
          // let's say this.subview is a reference to your child view 
          this.listenTo(this.subview, 'some-message', this.do_something);
     }

    // DO SOMETHING
     do_something: function(){
          alert('did something');
     }
});

Or use a dedicated event emitter you inject into your subview(s)

ChildView = Backbone.Marionette.ItemView.extend({
     send_message: function(){
          this.channel.trigger('some-message');
     }
})

ParentCollectionView = Backbone.Marionette.CollectionView.extend({
     initialize: function(){
          this.channel = _.extend({}, Backbone.Events); 
          this.listenTo(this.channel, 'some-message', this.do_something);
     },
     // ON RENDER
     onRender: function(){
          // pass the channel to the child
          // that probably should be done when the child is created
          this.subview.channel = this.channel;
     },
     // DO SOMETHING
     do_something: function(){
          alert('did something');
     }
});
like image 110
nikoshr Avatar answered Sep 26 '22 06:09

nikoshr