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

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

当Modal对话框显示只有“testButton”被解雇但“testLinkClick”没有被解雇时...非常感谢你的帮助

Answer 1

编辑：plnkr链接：http://plnkr.co/Yk7l8qMc6maMHwRD1a5C

我无法从代码中获取太多内容，因为它有太多的依赖项和子视图。我创建了自己的样本进行分享。希望这表明它是如何完成的。我使用区域的方法是通过调用region.show（view）将其粘贴到其中。这将调用render-＆gt; onRender-＆gt; show-＆gt; onShow-＆gt; 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);

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

1 个答案: