Dynamically compile a HTMLBars template at runtime in Ember

Question

I want to dynamically compile (and then render) a HTMLBars template at runtime, on the client in Ember. How can I do this?

Answer 1

This answer is now out of date. Please see @poohoka's answer which I've accepted above.

---

Building off of Kingpin2K's answer to Compile template client side in ember using HTMLbars:

For some background, it might be useful to refer back to Compiling Templates with Ember 1.10. We'll still need to load ember-template-compiler.js. Add

  app.import('bower_components/ember/ember-template-compiler.js');

to your ember-cli-build.js.

Then you can write a Component like this:

import Ember from 'ember';

export default Ember.Component.extend({

  layout: Ember.computed(function() {
    return Ember.HTMLBars.compile(
      '{{foo-bar}} <span>' + 'hello' + '</span>'
    );
  }),

});

This solution will likely break in future relases of Ember, depending on how the Ember Template compilation process changes with the advent of Glimmer 2.