Using precompiled Handlebars templates in Ember 2 project

Question

I'm need to use some precompiled handlebars templates in my ember project along with my normal components and templates. I've loaded the precompiled templates in my ember-cli-build.js file using app.import(). The precompiled templates are now showing up in the Handlebars.templates object, which I mapped to Ember.TEMPLATES["precompiled-template"] in my Ember app.js file between the app declaration and app initialization.

When I check the Ember.TEMPLATES object, the precompiled templates are there as functions of the form function(context, options) unlike the other templates which are objects.

When I try to use the precompiled template nothing shows up. Any thoughts?

Edit 1: I'm talking about small ui templates not the whole route template, and I am willing to sacrifice bindings.

How did you compile the templates? Did you use the same version of ember-template-compiler.js as ember.js? — Gaurav

goofiw goofiw · Accepted Answer · 2016-04-06T16:27:43

I figured out a way to use a helper to convert the handlebars templates to a string and creating a document fragment.

import Ember from 'ember';

export function helper(data/*, hash*/) {
  let precompiledTemplateFunction = Handlebars.templates[data[0]];
  return fragmentFromString(precompiledTemplateFunction());
}

function fragmentFromString(strHTML) {
  return document.createRange().createContextualFragment(strHTML);
}

export default Ember.Helper.helper(helper);

usage: {{helper 'precompiledTemplate'}}

I'm importing the templates in the ember-cli-build.js file app.import('vendor/path/to/precompiled/template');

I haven't dealt with passing in attributes through the helper but I don't think it will be that hard.

Using precompiled Handlebars templates in Ember 2 project

1 Answers