Backbone/Marionette - 如何在 Region 的子视图上监听事件？

Question

我有一个视图，一个 CollectionView 呈现在这个视图的一个区域内。如何让View监听CollectionView的事件？

const ChildCollectionView = marionette.CollectionView.extend({
    // ...

    events: {
        'click .bar': 'clickBar',
    },

    clickBar() {
        this.trigger('clickBar');
    },
}); 

const ParentView = marionette.View.extend({
    // ...
    regions: {
        foo: '.foo',
    },
    // ...
    onRender() {
        const fooRegion = this.getRegion('foo');

        fooRegion.on('show', function(view) {
            // XXX: this does not work
            view.on('childview:clickBar', function() {
                console.log('click bar');
            });
        });

        fooRegion.show(new ChildCollectionView({
            // ...
        }))
    },
});

Answer 1

您似乎在使用 Marionette 3.x。简而言之，您可以使用 childViewEvents.

至于代码的细节，最好让 CollectionView 的 childView 定义点击事件，因为子视图事件的侦听器将接收到被点击的 childView。在 ParentView 的 onRender 中使用 showChildView 方法也会更好。

const ChildView = marionette.View.extend({
    // ...
    triggers: {
        'click .bar': 'click:bar',
    },
    // or
    events: {
        'click .bar': 'clickBar'
    },
    clickBar() {
        // other child view stuff
        this.trigger('click:bar');
    },
});
const ChildCollectionView = marionette.View.extend({
    // ...
    childView: ChildView,
    childViewEvents: {
        'click:bar': 'barClicked',
    },
    barClicked(childView) {
        // other view stuff
        this.trigger('child:clicked:bar', childView);
        // or
        this.triggerMethod('child:clicked:bar', this, childView)
    }
});
const ParentView = marionette.View.extend({
    regions: {
        foo: '.foo'
    },
    childViewEvents: {
        'child:clicked:bar': 'clickBar'
    },
    clickBar(collectionChild, clickedChild) {
        console.log('click bar', collectionChild.cid, clickedChild.model.cid);
    },
    onRender() {
        this.showChildView('foo', new ChildCollectionView());
    }
});

请参阅下面的 JSFiddle，了解查看示例的不同方式以及触发事件的几种不同方式。（从 Marionette 示例分叉）

https://jsfiddle.net/opyfvsfx/36/

Backbone/Marionette - 如何在 Region 的子视图上监听事件？

Backbone/Marionette - How to listen to events on Region's child view?

javascript

backbone.js

marionette