带有 Marionette 视图的主干模式 - 子视图事件没有被触发

Posted 2023-05-07

【中文标题】带有 Marionette 视图的主干模式 - 子视图事件没有被触发

【英文标题】：backbone modal with Marionette views - subview events not getting fired

【发布时间】：2015-01-20 22:01:38

【问题描述】：

我有一个视图，它包含另一个子视图。但是当我单击子视图时，事件丢失了。我对 Marionette 和骨干模态有点陌生，有人可以帮帮我吗。

这是我的代码 sn-ps。

主视图js文件

定义（功能（要求） '使用严格'; var BaseLayoutView = require('lib/views/baseLayout'), DialogExampleSubView = require('views/dialogExampleSub'), BaseRegion = require('lib/regions/baseRegion'), 对话框示例视图； DialogExampleView = BaseLayoutView.extend( 模板：'dialogExample'， 初始化：函数（） this.dialogSubView.attachNewView(DialogExampleSubView); , 锤子事件： '点击.btn-default'：'testButton' , 测试按钮：功能（e） e.preventDefault(); e.stopPropagation(); console.log('你好按钮'); , 地区： 对话框子视图： 选择器：'#testMiniView', 区域类：BaseRegion ); 返回对话框示例视图； );

子视图js文件

定义（功能（要求） '使用严格'; var BaseView = require('lib/views/baseView'), 发泄=需要（'发泄'）， _ = 要求（'下划线'）， 木偶=需要（'木偶'）， 对话框示例子视图； DialogExampleSubView = BaseView.extend( 模板：'dialogExampleSub'， 初始化：函数（） Marionette.bindEntityEvents(this, this, this.events); , 事件： '点击 .tooltip-test': 'testLinkClick' , testLinkClick：函数（e） console.log('你好链接点击'); e.preventDefault(); e.stopPropagation(); ); 返回 DialogExampleSubView； );

当模态对话框显示只有“testButton”被触发但“testLinkClick”没有被触发时..感谢您的帮助

【问题讨论】：

我有点不愿意帮助那些甚至没有花 5 秒时间就将代码发布到这里的人。

抱歉，Henry，我现在清理了，我确实清理了我的 cmets，因为我想分享我到目前为止所尝试的内容。

【参考方案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);