Use Ember 1.10 to compile the template


As we all know, Ember 1.10 will be the first version of Ember, it uses HTMLBars As its template engine. With this change, you may need to change the way the template is compiled.

The HTMLBars API is under constant development and is not yet 1.0.0, so to ensure that the template compilation is compatible with your Ember version, we have updated the Ember build system to generate a ember-template-compiler.js The files go with every build of Ember. This template compiler can be used for server-side pre-compilation or just-in-time compilation of templates in the browser.If you don’t need to compile the template at runtime (in the browser) ember.debug.js or ember.prod.js A separate file is sufficient. No need to include runtime dependencies.This is different from previous versions, where you always included handlebars.js or handlebars.runtime.js.

Most of the time you will use third-party libraries such as Embers-cli, man-cli-htmlbars, Or grunt-ember-template Precompiled templates, but this article will discuss how such libraries should work internally.

Server-side compilation

If possible, compiling the template server-side is definitely the best practice. Since the overall size is smaller (you don’t need a compiler on the client) and the application needs to do less work, it is much faster.

Ember 1.0 to 1.9

In previous versions, you would usually use ember-template-compiler The NPM package corresponding to your Ember version is used to precompile your template. This might resemble the following:

var fs = require('fs');
var compiler = require('ember-template-compiler');
var input = fs.readFileSync('path/to/template.hbs', { encoding: 'utf8' });
var template = compiler.precompile(input, false);
var output = 'export default Ember.Handlebars.template(' + template + ');';

fs.writeFileSync('path/to/output.js', output, { encoding: 'utf8' });

You also need to include handlebars.runtime.js In your final version

Man 1.10+

In Ember 1.10, you will use ember-template-compiler.js The file paired with your version of Ember.If you use our Ball repurchase or rubyOr download Ember from our Build a station, There is a ember-template-compiler.js In the same path ember.debug.js with ember.prod.js.

You can use this template compiler directly without additional requirements. E.g:

var fs = require('fs');
var compiler = require('./bower_components/ember/ember-template-compiler');
var input = fs.readFileSync('path/to/template.hbs', { encoding: 'utf8' });
var template = compiler.precompile(input, false);
var output = 'export default Ember.HTMLBars.template(' + template + ');';

fs.writeFileSync('path/to/output.js', output, { encoding: 'utf8' });

You will notice that the new API for server-side compilation is almost the same as the previous version of the API.The main change is to use local bower_components/ember/ember-template-compiler.js File instead of NPM module.

Client compilation

In general, you should avoid compiling templates on the client side, but sometimes you cannot avoid this.Live demo applications such as JSBin Is an example.

Ember 1.0 to 1.9

In previous versions of Ember, you need to make sure that the full version Handle.js Exists to allow the template to be compiled.Maybe your following is similar to the following index.html:

<script src="assets/handlebars.js"></script>
<script src="assets/ember.prod.js"></script>

Man 1.10+

In Ember 1.10, you will include ember-template-compiler.js For your specific Ember version. Similar to the following:

<script src="assets/ember-template-compiler.js"></script>
<script src="assets/ember.prod.js"></script>

If you include ember.debug.js Files instead of production files, the compiler is still necessary.

Template compilation build tool

There are many build tool libraries designed to make server-side compilation of templates easier. Here are some (please let us know others):

Leave a Reply

Your email address will not be published. Required fields are marked *