Marionette Composite Item View Capture - backbone.js

Question

I have a composite view which consist of item view. I need to capture the events of item view, what I am trying to capture is specific item view capture as I am rendering a pop up modal on click of button in item view. The Modal needs to contains the details of item for which it is clicked. Whats happening is if I put the event capture in either or item or composite view with query selector of buttons (this button has hidden span of item id) it always selects the first items.
Sounds like it is doing right thing as the item view repetition in composite view is not changing the id of buttons (even if the hidden span has different id).
Quesiton is how do I achieve capturing specific item events with attributes captures.
code below :
ItemView:
var regItemView = Marionette.ItemView.extend({
template: ProgramRegistraionMainItemView,
tagName: 'div',
className : 'accordion_in',
events : {
'click #subbtn' : function () {
var prgid = $('#regid').html();
var rate = $('#rate').html(); MyApp.mainregion.currentView.appcontent.currentView.maincontent.currentView.contentregion1.currentView.prgregmainmodal.show(new ProgramRegistrationModalView({selectedprgid : prgid,rate: rate}));
}
}
});
Composite View
var RegistrationView = Marionette.CompositeView.extend({
itemView : regItemView,
itemViewContainer: "#mainaccordion",
template : ProgramRegistraionMainCollectionView,
initialize : function(programcollection)
{
this.collection = programcollection;
this.model =null;
},
model : this.model,
collection : this.collection,
showAccord : function () {
//console.log("In Accodian show"+$("#mainaccordion").html());
$("#mainaccordion").smk_Accordion({
showIcon: true, // Show the expand/collapse icons.
animation: true, // Expand/collapse sections with slide aniamtion.
closeAble: true, // Closeable section.
slideSpeed: 200, // the speed of slide animation.
closeOther : false
});
}
Aim is to get the program id of the clicked item (rendered through item view).

Answer 1

From your regItemView's event hash, it looks like the issue is with using an html id for the jQuery event handler. id's are supposed to be unique across the whole page but you have repeated it for each ItemView. Change it to a class or an element name (if you've only got one per item view):
var regItemView = Marionette.ItemView.extend({
template: ProgramRegistraionMainItemView,
tagName: 'div',
className : 'accordion_in',
events : {
'click button' : 'showModal'
},
showModal: function () {
// Show modal somehow
// you can access the model in here as this.model
}
});
Marionette sets the event handler context as the item view so you can simple access the model as this.model. This is better than adding data-id tags into your HTML to retrieve the model.