Help with precompile handlebar templates


#1

I’ve been really struggling with precompiling handlebar templates for ember.js

I have tried implementing a half dozen node packages, but have been unable to make it through the documentation before running into errors or dependency-issues that I can’t resolve.

I really don’t care about the technologies or method I need to use, I just want to see if there is a detailed guide somewhere on a tool that I can use to precompile handlebar files in a directory to a single JS file that is Ember ready.

Thank you in advance.


#2

on the one hand, I think that your question is better suited over at http://stackoverflow.com/questions/tagged/ember.js :smiley_cat: - on the other hand: why don’t you use https://www.npmjs.org/package/ember-template-compiler?

In the description it states it’s

An npm module for the ember-template-compiler.js file that ships with ember.js

and it works perfectly :smiley:


#3

I did take a look at ember-template-compiler and read

If you have a client build process and need to compile handlebars templates for ember.js

At first, I thought that meant everything was compiled on the client/browser side. (I wanted to load a single compiled JSON template file for Ember).

Edit: Thinking back, I thought it read “client-side build process” lol. Not sure where I got that from.

I’ll use this. Thanks!


#4

I’m using Gulp for builds, and precompiling templates looks like this:

var handlebars = require('gulp-ember-handlebars');
var concat = require('gulp-concat');

var SRC = {
    TEMPLATES: ['app/templates/**/*.{hbs,html}']
};

gulp.task('templates', function() {
  return gulp.src(SRC.TEMPLATES)
    .pipe(handlebars({outputType: 'browser'}))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest(DEST.SCRIPTS));
});

Then I use the Handlebars runtime library rather than the full version.

Ember-Handlebars: https://www.npmjs.org/package/gulp-ember-handlebars


#5

8 hours later and I still haven’t gotten ember-template-compiler working :slight_smile: Documentation within the Ember community at large is so sparse…


#6

do you use any build tool like Grunt or Gulp? if you use Grunt, take a look at https://github.com/dgeb/grunt-ember-templates which is just great (documentation is also good) - if you use Gulp, take the approach of @macu.

you could also take a look at the Ember App Kit and its emberTemplates.js Grunt task (here: https://github.com/stefanpenner/ember-app-kit/blob/master/tasks/options/emberTemplates.js) which is precompiling all Handlebars templates into a templates.js file which is then loaded after ember in the HTML page.


#7

@hazeltree I had the same issue and made a small Broccoli plugin that you can pass a compile function. Here’s an example of how I use ember-template-compiler.js with the broccoli plugin to output a single file with all precompiled templates.

module.exports = function (broccoli) {
  var compiler = require('ember-template-compiler');
  var broccoliTemplateBuilder = require('broccoli-template-builder');

  var templates = broccoli.makeTree('your/templates');

  templates = broccoliTemplateBuilder(templates, {
    extensions: ['hbs']
  , outputFile: 'assets/templates.js'
  , namespace: 'Ember.TEMPLATES'
  , compile: function (string) {
      return 'Ember.Handlebars.template('+compiler.precompile(string)+')';
    }
  });

  return templates;
};

#8

I made available a demo example which precompiles templates based on rake pipeline or broccoli.

In this example, the plugin precompiles either “inline” view (Ember.Select) in the EmberJS code or file templates. The steps are:

  1. Obtain the ember-template-compiler, in this case, it is autogenerated based on EmberJS source at the broccoli file or Assetfile.

  2. Precompile the template data using ember-template-compiler function and add the result to the Ember.TEMPLATES variable.

Filter.prototype._precompileTemplate = function (templateName, data) {
  var precompiledData = this.module.precompileEmberHandlebars(data);
  return "\nEmber.TEMPLATES['"+templateName+"'] = Ember.Handlebars.template("+precompiledData+");\n"
}