How to use precompiled templates in Handlebars with RequireJS?

Question

I would like to precompile Handlebars templates, but I'm not sure how this works in design mode.

Is there a background process in common practice, for example, Guard, for constantly monitoring changes to Handlebars template files?

I use RequireJS to create templates; eg:.

define(['jquery', 'handlebars', 'text!templates/my_template'], function($, Handlebars, myTemplate) { // ... var data = {"some": "data", "some_more": "data"}; var templateFn = Handlebars.compile(myTemplate); $('#target').append(templateFn(data)); // ... }); 

So, I understand that when the templates are precompiled, you can do the following:

 define(['jquery', 'handlebars'], function($, Handlebars) { // ... var data = {"some": "data", "some_more": "data"}; var template = Handlebars.templates['my_template']; $('#target').append(template(data)); // ... }); 

Notice the following in the second code snippet:

• The RequireJS module no longer draws a template.
• Handlebars.compile () is no longer used.

As a rule, I have a Guard so that my templates are compiled whenever there are file changes at the file level with the template files?

Mostly my question is , the intention of the developers to do this?

 if (development) { compile templates } else { use precompiled templates } 

I also use Rails, so there may be black magic like sass-rails.

Answer 1

Have a look at the Require.js Handlebars plugin ( https://github.com/SlexAxton/require-handlebars-plugin ) or the epeli requirejs-hbs ( https://github.com/epeli/requirejs-hbs )?

Answer 2

Asking this question, I discovered that another way to achieve this could be through Grunt Watch. However, an even better way is to use Grunt and Browserify, completely skipping RequireJS. You will then use NPM packages ... and most of the libraries available with RequireJS seem to be available as NPM packages (surprisingly even DOM libraries like jQuery, Backbone, Angular). Then you use synchronous calls to require () for requiring actions:

 var $ = require('jquery'), Backbone = require('backbone'), AppRouter = require('./app/routers/app'); // Compile LESS and attach resulting CSS to the HEAD. require('./less/app.less'); $(function() { new AppRouter(); Backbone.history.start(); }); 

This is much nicer, and it is possible because the application is completely built every time it runs. Combine this with Grunt Watch in such a way that your application is rebuilt every time there is a change and you are in business.

And the build process even takes care of creating Handlebars templates. To include a template, you simply do require('./templates/my-template.hbs'); , and the build process for the grunt browser will find the call to require (), compile the template, and include the compiled template in the js file of the build application.

Much nicer than RequireJS!

Answer 3

This article about Require.js and Handlebars can help http://seanamarasinghe.com/developer/requirejs-handlebars/