Can I override a method in a JSPM package?

Question

I'm migrating a project to use JSPM & SystemJS. In my app, I override a Backbone Marionette render method to use Mustache templates:

Marionette.Renderer.render = function (template, data) {
     return Mustache.render(template, { Model: data }, partials);
}

This was simple in the old world - just have the above code after marionette js and mustache js have been added to the page. I can't see how to override this when I'm loading it as a module though.

import * as Marionette from "backbone.marionette";

Answer 1

If your problem is just the loading order you can, for instance, create a new (i.e. custom) marionette module that depends both on backbone.marionette and mustache and extends marionette. Something like

import Marionette from 'backbone.marionette';
import Mustache from 'moustache';

Marionette.Renderer.render = function (template, data) {
 return Mustache.render(template, { Model: data }, partials);
}

export default Marionette;

After that, you'll need map your custom module on SystemJS config:

System.config({
   'map': {
      'custom-marionette': 'path/to/source/custom-marionette',
   ...
   }
}

Then you'll be able to import your custom module inside your application:

import Marionette from 'custom-marionette';