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/