Question

我有两个观点，MainView和ChildView。 ChildView已在MainView实例之外进行配置和实例化，并注入MainView。由于MainView方法，ChildView在呈现时会显示onRender。

我遇到的问题是，如果MainView呈现第二次，则ChildView上的所有事件侦听器都将被终止。 ChildView仍显示在第二个渲染上，但它不响应用户事件（如鼠标单击）。甚至不是自己的事件。

var MainView = Marionette.Layout.extend({
    regions: {
        'menu': '.menu'
    },
    template: "#sample-template",
    onRender: function() {
        this.menu.show(this.options.menuView);
    }
});

var ChildView = Marionette.ItemView.extend({
    template: '#menu-template',
    triggers: {
        'click .js-click-me': 'clicked'
    },
    onClicked: function() {
        alert('the button was clicked...');
    }
});

// Where the view is used and displayed in a main app region:
var model = new Backbone.Model({
    contentPlacement: "here"
});

var childView = new ChildView({
    model: model
});

var view = new MainView({
    model: model,    
    menuView: childView
});

this.region.show(view);

// A 2nd render kills event listeners in the childView
// Remove this line, and it will work again...
view.render();

我有jsfiddle来证明这一点。如果您注释掉第二个render（第65行），您会看到ChildView上的事件确实有效。

防止这种情况发生的最佳方法是什么？有没有更好的方法在Marionette中配置视图并将其注入另一个视图？

Answer 1

因此，当子视图与另一个视图换出时，父视图将重新呈现？通常，在这种情况下，我会初始化父视图以侦听在子视图更改时触发的事件。

我调整了你的小提琴，告诉你我的意思： http://jsfiddle.net/nu6mm/5/

我更改了按钮模板以显示更改子视图。另外，这个：

<script type="text/html" id="sample-template">
  put some content <%= contentPlacement %>.
  <div class="menu"></div>
</script>

除非将子模型绑定到父视图，否则在子项更改时不会更改。

Answer 2

正如@muistoshort指出的那样，这与带有木偶扭曲的Backbone: event lost in re-render非常相似。重新呈现时，修复是delegateEvents上的ChildView。使用Marionette，这就像添加执行此操作的onRender回调一样简单：

var ChildView = Marionette.ItemView.extend({
    template: '#menu-template',
    triggers: {
        'click .js-click-me': 'clicked'
    },
    onClicked: function() {
        alert('the button was clicked...');
    },
    onRender: function() {
        this.delegateEvents();
    }
});

Backbone非常聪明，不会将事件委托两次（在第一次渲染时），因此它按预期工作。

重新渲染父视图会杀死Marionette中子视图上的事件

2 个答案: