mercredi 19 avril 2017

How can I "deep extend" or "modularly extend" a class in Backbone / Marionette?

In Marionette, we have a "master view" that we would like to extend.

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

The ideal use case would be extending this view, or class, by more specific views that would implement most of the features, and modify some of the features, of the master class / view:

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

The problem is we're not sure how to selectively modify things such as the events hash, or override certain childview options. Specifically:

  1. If MotorcycleColorChooserDropdown has an events object, it will override all of the events the PaginatedDropdown is listening for. How do we mix and match? (allow having an events object on MotorcycleColorChooserDropdown that combines itself with PaginatedDropdown's events object?

  2. Potentially unsolvable: What if we want all the functionality of the PaginatedDropdown click event, but we also want to add to it a little bit in MotorcycleColorChooserDropdown? Do we just have to manually stick all the functionality from the Parent into the Child class?

We have considered simply not doing extended views like this, or doing things like MotorcycleColorChooserDropdown = PaginatedDropdown.extend(); and then one at a time doing MotorcycleColorChooserDropdown.events = PaginatedDropdown.events.extend({...}); but that seems messy, ugly, and I'm sure there's a better way.






Comments
0 Comments

0 commentaires:

Enregistrer un commentaire