Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set lodash / underscore template settings globally using require.js

Is there a way to set the templateSettings for lodash when using RequireJS?

Right now in my main startup I have,

  require(['lodash', 'question/view'], function(_, QuestionView) {
    var questionView;
    _.templateSettings = {
      interpolate: /\{\{(.+?)\}\}/g,
      evaluate: /\{\%(.+?)\%\}/g
    };
    questionView = new QuestionView();
    return questionView.render();
  });

but it doesn't seem to want to set the templateSettings globally because when I use _.template(...) in a module it wants to use the default templateSettings. The problem is that I don't want to change this setting in every module that uses _.template(...).

like image 227
milkypostman Avatar asked Oct 24 '12 20:10

milkypostman


1 Answers

Based on @Tyson Phalp suggestion, that means this SO question.
I adapted it to your question and I tested it using RequireJS 2.1.2 and SHIM configuration.
This is the main.js file, that is where the requireJS config is:

require.config({
/*  The shim config allows us to configure dependencies for
    scripts that do not call define() to register a module */

    shim: {
      underscoreBase: {
        exports: '_'
      },
      underscore: {
        deps: ['underscoreBase'],
        exports: '_'
      }

    },
    paths: {
      underscoreBase: '../lib/underscore-min',
      underscore: '../lib/underscoreTplSettings',
    }
});

require(['app'],function(app){
  app.start();
});

Then you should create the underscoreTplSettings.js file with your templateSettings like so:

define(['underscoreBase'], function(_) {
    _.templateSettings = {
        evaluate:    /\{\{(.+?)\}\}/g,
        interpolate: /\{\{=(.+?)\}\}/g,
        escape: /\{\{-(.+?)\}\}/g
    };
    return _;
});

So your module underscore will contain the underscore library and your template settings.
From your application modules just require the underscore module, in this way:

define(['underscore','otherModule1', 'otherModule2'], 
   function( _, module1, module2,) { 
      //Your code in here
   }
);

The only doubt I have is that I'm exporting the same symbol _ two times, even tough this work I'm not sure if this is considered a good practice.

=========================

ALTERNATIVE SOLUTION: This also works fine and I guess it's a little bit more clean avoiding to create and requiring an extra module as the solution above. I've changed the 'export' in the Shim configuration using an initialization function. For further understanding see the Shim config reference.

//shim config in main.js file
shim: {     
  underscore: {
      exports: '_',
      init: function () {
        this._.templateSettings = {
          evaluate:/\{\{(.+?)\}\}/g,
          interpolate:/\{\{=(.+?)\}\}/g,
          escape:/\{\{-(.+?)\}\}/g
        };
        return _; //this is what will be actually exported! 
      }
  }
}
like image 78
Leonardo Avatar answered Oct 16 '22 05:10

Leonardo