0

我有两个视图， aMainView和 a ChildView。在实例ChildView外部配置和MainView实例化并注入到MainView. 由于该方法，它MainView显示了ChildView渲染的时间onRender。

我遇到的问题是，如果第二次MainView渲染，则所有事件侦听器都会被杀死。仍然显示在第二次渲染中，但是它不响应用户事件（如鼠标点击）。甚至没有它自己的事件。ChildViewChildView

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可以证明这一点。如果您注释掉第 2render行（第 65 行），您会发现ChildViewdo 上的事件实际上是有效的。

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

4

2 回答 2

0

正如@muistoshort 指出的那样，这与Backbone 非常相似：事件在重新渲染时丢失，并带有木偶扭曲。修复是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 足够聪明，不会两次委托事件（在第一次渲染时），因此它可以按预期工作。

于 2013-09-18T14:03:01.390 回答
0

那么当子视图换成不同的视图时，父视图会重新渲染吗？通常，在这种情况下，我会初始化父视图以监听子视图更改时触发的事件。

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

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

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

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

于 2013-09-17T05:02:28.937 回答