骨幹模態與木偶意見 - 子視圖事件未被觸發

Question

我有一個視圖，它包含另一個子視圖。但是當我點擊子視圖時，事件丟失了。我對木偶和骨幹莫代爾有點新，有人可以幫助我。

這裏是我的代碼片段。

主要觀點js文件

 

    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; 
    }); 

子視圖js文件

 

    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; 
    }); 

當模態對話框顯示了只有 「testButton」 被炒，但 「testLinkClick」 是不是被解僱..會感謝你的幫助

Answer 1

被修改：plnkr鏈接：http://plnkr.co/Yk7l8qMc6maMHwRD1a5C

我無法從你的代碼中獲得太多，因爲它有太多的依賴和子視圖。我創建了我自己的樣本來分享。希望這可以說明它是如何完成的。我將使用區域的方式是通過調用region.show（view）將其粘貼到視圖中。這會調用render-> onRender-> show-> onShow-> onDomRefresh事件。

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);