Question

在Marionette，我们有一个＆＃34;主视图＆＃34;我们想扩展。

var PaginatedDropdown = Marionette.CompositeView.extend({
  template: template,
  events: {
    'click': function () { return 'hello';},
    'keyup': function () { return 'goodbye'}
  },
  childViewOptions: {
     tagName: 'li'
  }
});

理想的用例是通过更具体的视图来扩展这个视图或类，这些视图将实现大多数特性，并修改主类/视图的一些特性：

var MotorcycleColorChooserDropdown = PaginatedDropdown.extend({
    events: {
      'mouseenter': function () { return 'vroom'; };
    }
});

问题是我们不确定如何有选择地修改诸如事件哈希之类的事情，或者覆盖某些子视图选项。具体做法是：

如果MotorcycleColorChooserDropdown有events个对象，它将覆盖PaginatedDropdown正在侦听的所有事件。我们如何混搭？（允许MotorcycleColorChooserDropdown上的事件对象与PaginatedDropdown的事件对象结合使用？
潜在无法解决：如果我们想要PaginatedDropdown click事件的所有功能，但我们还希望在MotorcycleColorChooserDropdown中添加一些内容，该怎么办？我们是否只需手动将所有功能从Parent添加到Child类中？

我们考虑过根本不做像这样的扩展视图，或做MotorcycleColorChooserDropdown = PaginatedDropdown.extend();之类的事情，然后一次做MotorcycleColorChooserDropdown.events = PaginatedDropdown.events.extend({...});，但这看起来很乱，很丑，而且我确定那里和＃39;更好的方式。

Answer 1

这是我一直在做的事情

var PaginatedDropdown = Marionette.CompositeView.extend({
  template: template,
  events: {
    'click': 'onClick',
    'keyup': function () { return 'goodbye'}
  },
  onClick:function(e){
      return 'hello'
  },
  childViewOptions: {
     tagName: 'li'
  }
});

var MotorcycleColorChooserDropdown = PaginatedDropdown.extend({
    events: _.extend({
      'click': 'onClick',
      'mouseenter': function () { return 'vroom'; };
    },PaginatedDropdown.prototype.events),
    onClick:function(e){
        PaginatedDropdown.prototype.onClick.call(this,e)
        //code
    }
});

对于您的第一个问题，我只是将孩子events与父events一起展开。

至于第二个，我只是从子进程中调用父方法，传入子上下文和事件对象。

它非常冗长，但也非常明确。阅读代码的人会确切知道发生了什么。

Answer 2

你可以：

foo

我怎样才能深度延伸＆＃34;或＆＃34;模块化扩展＆＃34; Backbone / Marionette的课程？

2 个答案: