0

MainViewaと aの 2 つのビューがありChildViewます。はChildView、インスタンスの外部で構成およびMainViewインスタンス化され、 に注入されますMainView。は、メソッドのおかげでMainView、いつレンダリングされるかを示しています。ChildViewonRender

私が抱えている問題は、 が2 回目MainViewにレンダリングされると、 上のすべてのイベント リスナーが強制終了されることです。は2 回目のレンダリングでも表示されますが、ユーザー イベント (マウス クリックなど) には応答しません。独自のイベントでさえありません。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があります。2 番目 (65 行目) をコメントアウトすると、 dorenderのイベントが実際に機能することがわかります。ChildView

これを防ぐ最善の方法は何ですか？マリオネットでビューを構成して別のビューに挿入するより良い方法はありますか?

4

2 に答える 2

0

@muistoshort が指摘したように、これはBackbone と非常によく似ています。Marionette ひねりを加えた再レンダリングで失われたイベントです。修正は、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();
    }
});

バックボーンは、イベントを 2 回 (最初のレンダリングで) デリゲートしないほどスマートなので、期待どおりに動作します。

于 2013-09-18T14:03:01.390 に答える