Backbone/Marionette - Comment écouter les événements sur la vue enfant de la région ?

Question

J'ai une vue, une vue de collection est rendue à l'intérieur d'une région de cette vue. Comment puis-je faire en sorte que la vue écoute les événements du 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

Il semble que vous utilisez Marionette 3.x. En bref, vous pouvez utiliser childViewEvents .

En ce qui concerne les spécificités de votre code, il serait préférable d'avoir la fonction childView de votre CollectionView définissent l'événement de clic, car l'écouteur de l'événement de la vue enfant recevra la vue enfant qui a été cliquée. Il serait également préférable d'utiliser l'élément showChildView dans la méthode ParentView onRender.

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

Voir JSFiddle ci-dessous pour différentes façons de voir un exemple ainsi que quelques façons différentes de déclencher des événements. (forked from Marionette example)

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