backbone modal with Marionette views - subview events not getting fired

Question

I have a view and it contains another subview. But When i click on subview the events are missing. I am kinda new to Marionette and backbone modal and can someone please help me out.

here is my code snippets.

Main view js file

    define(function(require) {

        'use strict';

        var BaseLayoutView = require('lib/views/baseLayout'),
            DialogExampleSubView = require('views/dialogExampleSub'),
            BaseRegion = require('lib/regions/baseRegion'),
            DialogExampleView;

        DialogExampleView = BaseLayoutView.extend({

            template: 'dialogExample',

            initialize: function () {
                this.dialogSubView.attachNewView(DialogExampleSubView);
            },
            hammerEvents : {
                'tap .btn-default': 'testButton'
            },
            testButton : function(e){
                e.preventDefault();
                e.stopPropagation();
                console.log('hello button');
            },
            regions: {
                dialogSubView: {
                    selector: '#testMiniView',
                    regionClass: BaseRegion
                }
            }
        });
        return DialogExampleView;
    });

SubView js file

    define(function(require) {

        'use strict';

        var BaseView = require('lib/views/baseView'),
            vent = require('vent'),
            _  = require('underscore'),
            Marionette = require('marionette'),
            DialogExampleSubView;

        DialogExampleSubView = BaseView.extend({

            template: 'dialogExampleSub',

            initialize: function () {
                Marionette.bindEntityEvents(this, this, this.events);
            },
            events : {
                'click .tooltip-test': 'testLinkClick'
            },
            testLinkClick : function(e){
                console.log('hello link click');
                e.preventDefault();
                e.stopPropagation();
            }
        });
        return DialogExampleSubView;
    });

When Modal dialog shows up only "testButton" getting fired but "testLinkClick" is not getting fired.. would appreciate your help

Answer 1

Edited: plnkr link: http://plnkr.co/Yk7l8qMc6maMHwRD1a5C

I couldn't get much out of your code because it had too many dependencies and sub views. I created my own sample to share. Hopefully this shows how it can be done. The way I would use a region is to stick it a view inside of it by calling region.show(view). This invokes render->onRender->show->onShow->onDomRefresh events.

var MyChildView = Marionette.ItemView.extend({
  template: "<div> this is my child view template <button class='tooltip-test'>tooltip test</button></div>",
  events: {
    "click .tooltip-test": function() {
      console.log("clicked from tooltip-test");
    }
  }
});

var MyLayoutView = Marionette.LayoutView.extend({
  template: "<div> this is the layout view <button class='layoutButton'>Layout button</button> <div id='testMiniView'/></div>",
  regions: {
    dialogSubView: "#testMiniView"
  },
  events: {
    "click .layoutButton": function() {
      console.log("clicked from layoutButton");
    }
  },
  onRender: function() {
    var childView = new MyChildView();
    this.dialogSubView.show(childView);
  }
});


var myLayout = new MyLayoutView();
var $html = myLayout.render().$el;

//attach the view to the DOM
$("body").append($html);