Javascript 重新渲染父视图将终止木偶中子视图上的事件

我有两个视图，一个是

MainView

，一个是

ChildView

。

ChildView

在

MainView

实例之外配置和安装，并注入到

MainView

中。由于采用了

onRender

方法，在渲染时，

MainView

会显示

ChildView

我遇到的问题是，如果第二次呈现

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

我有一个例子来证明这一点。如果注释掉第二个

渲染

（第65行），您将看到

子视图

上的事件实际上是有效的

---

防止这种情况发生的最佳方法是什么？是否有更好的方法来配置视图并将其插入到木偶网中的另一个视图中？

这样，当子视图与其他视图交换时，父视图将重新渲染？通常，在这种情况下，我会初始化父视图以侦听在子视图更改时触发的事件

我调整了一下你的小提琴，让你明白我的意思：

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

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

放一些内容。

---

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

正如@muistoshort所指出的，这与木偶扭曲非常相似。修复方法是在重新渲染时在

子视图

上删除事件。对于木偶，这与添加一个执行以下操作的

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

---

主干足够智能，不会委派事件两次（在第一次渲染时），因此它可以按预期工作。

我怀疑这是一个顶部有木偶的复制。您试图实现什么？是什么触发了MainView重新渲染？@Erik子视图是一个菜单，根据父视图渲染的上下文，它可以有不同的按钮。我不想将所有可能的菜单事件绑定到父菜单事件，而是想将它们绑定到子菜单事件，然后子菜单事件被注入父菜单事件。@muistooshort是的，这或多或少是该问题的重复。通过将

onRender:function（）{this.delegateEvents（）；}

添加到

ChildView

，事件将被保留。我不知道jQuery的

empty

方法也删除了DOM事件。聪明。现在的问题是，事件是否在第一次呈现时被委派两次？这真的是处理这个问题的最好方法吗？下面是一个例子来说明这个修复方法。显然，

delegateEvents

足够聪明，不会在第一次渲染时将事件委派两次。赢@如果你想回答的话，我会确保你得到荣誉。这不是我想要的。即使这样，如果重新渲染

父视图

，

子视图

上的事件也会丢失。在我的实际程序中，可能会有很多事情重新呈现父视图，因为它相当复杂。好的。但在我的示例中，parentView确实得到了重新渲染，并且事件仍然保持不变。我没有看到

parentView

在哪里得到了重新渲染，所以我自己添加了它，它终止了事件。第84行。当设置子视图时，父视图将重新呈现自身。参见第24行：this.listenTo（this'childChange'，this.render）；