CODEWITHSUNDEEP
javascriptember.jshtmlbars
dwhite
dwhite

Reputation: 1988

How to compile inline HTMLBars templates?

I have an inline template (template in JavaScript) that I used to compile like so (where temp is a Handlebars string):

var template = Handlebars.compile(temp);
template({model: results}); // Gets the HTML

I'm trying to use HTMLBars instead, but can't quite figure it out. I did the following:

var template = Ember.HTMLBars.compile(temp);
template({model: results}); // Throws an error that template isn't a function

How do I go about getting the HTML back from the HTMLBars template. I also tried:

var template = Ember.HTMLBars.compile(temp);
Ember.HtmlBars.template(template, {model: results});

Which doesn't error, but also doesn't use the model when rendering the HTML. I think I'm close, but can't quite figure out how to inject the model.

Upvotes: 2

Views: 1767

Answers (1)

GJK
GJK

Reputation: 37389

HTMLBars doesn't produce functions like Handlebars did. Handlebars was a string templating language: you compile a string to a template function, then run that function to produce a string. HTMLBars compiles a string into a template but the template doesn't produce a string, it produces DOM nodes. The simple answer is that you're not going to be able to do the same things with HTMLBars as you did with Handlebars. I suggest either adding another string templating library to your code (maybe Handlebars), or letting a view handle the HTMLBars template as seen in this question.

And if you're curious, here's what an HTMLBars template object looks like after being compiled (gotten from a JSBin console dump):

[object Object] {
  blockParams: 0,
  build: function build(dom) {
      var el0 = dom.createDocumentFragment();
      var el1 = dom.createTextNode("");
      dom.appendChild(el0, el1);
      var el1 = dom.createTextNode("");
      dom.appendChild(el0, el1);
      return el0;
    },
  cachedFragment: null,
  hasRendered: false,
  isHTMLBars: true,
  isMethod: false,
  isTop: true,
  render: function render(context, env, contextualElement) {
      var dom = env.dom;
      var hooks = env.hooks, content = hooks.content;
      dom.detectNamespace(contextualElement);
      var fragment;
      if (env.useFragmentCache && dom.canClone) {
        if (this.cachedFragment === null) {
          fragment = this.build(dom);
          if (this.hasRendered) {
            this.cachedFragment = fragment;
          } else {
            this.hasRendered = true;
          }
        }
        if (this.cachedFragment) {
          fragment = dom.cloneNode(this.cachedFragment, true);
        }
      } else {
        fragment = this.build(dom);
      }
      if (this.cachedFragment) { dom.repairClonedNode(fragment,[0,1]); }
      var morph0 = dom.createMorphAt(fragment,0,1,contextualElement);
      content(env, morph0, context, "foo");
      return fragment;
    }
}

Upvotes: 3

Related Questions