Marionette view event trigger not being caught by listener

Question

Can someone figure out why my events are not being listened to?

If I put the events and the function in the ItemView, the trigger never gets noticed in the view controller

If I put the event listener and corresponding function in the CollectionView, the trigger gets noticed in the view controller and it's happy days, except that I can't get access to the individual model.

ListingView.ListingItem = Marionette.ItemView.extend({
  tagName: "div",
  className: "grid-flex  mix-10-70-15 row-wrap itemDetail",
  template: "#listing-item",
  /*
    Using the code below in the ItemView gives me access to
    the current model, but the trigger isn't picked up in the controller
  */
  events: {
    "click":"editItemDetail"
  },
  editItemDetail: function() {
    console.log('You clicked');
    this.trigger("itemsListing:editCurrentItem", this.model);
  }
});

ListingView.ListingItems = Marionette.CollectionView.extend({
  tagName: "div",
  className: "listItemsWrapper",
  template: "#listing-items",
  itemView: ListingView.ListingItem,
  /*
    Putting the code below in the CollectionView
    gets acted on by the controller. I get the alert
    but I can't get access to the selected model
  */
  events: {
    "click":"editItemDetail"
  },
  editItemDetail: function() {
    console.log('You clicked');
    this.trigger("itemsListing:editCurrentItem", this.model);
  }
});

and the controller code:

var listingView = new ListingView.ListingItems({
collection: listCollection
});

tillRollView.on("itemsListing:editCurrentItem", function(model) {
    alert('Gotcha baby!');
    console.log(model);
});

I'd like to know why the controller doesn't like my trigger in the ItemView (I'm doing this successfully in other places in my app). I'd also like to know if I can get the model from my CollectionView instead. Either way will get my app working, thanks in advance.

eightyfive eightyfive · Accepted Answer · 2013-11-12T12:05:22

I think when an event is triggered from an ItemView within a CollectionView, it is then prefixed by itemview:.

In your case that would give:

tillRollView.on("itemview:itemsListing:editCurrentItem", function(model) {
    alert('Gotcha baby!');
    console.log(model);
});

From Marionette official documentation:

When an item view within a collection view triggers an event, that event will bubble up through the parent collection view with "itemview:" prepended to the event name.

Marionette view event trigger not being caught by listener

1 Answers