Backbone/Marionette - 如何聆聽地區兒童視圖上的活動？

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/