如何编译内联 HTMLBars 模板？答案

【问题标题】：How to compile inline HTMLBars templates?如何编译内联 HTMLBars 模板？
【发布时间】：2015-06-06 19:50:33
【问题描述】：

我有一个用于编译的内联模板（JavaScript 中的模板）（其中temp 是 Handlebars 字符串）：

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

我正在尝试使用 HTMLBars，但无法完全弄清楚。我做了以下事情：

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

如何从 HTMLBars 模板中获取 HTML。我也试过了：

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

这不会出错，而且在渲染 HTML 时也不使用模型。我想我已经接近了，但不太清楚如何注入模型。

【问题讨论】：

标签： javascript ember.js htmlbars

【解决方案1】：

HTMLBars 不像 Handlebars 那样产生功能。 Handlebars 是一种字符串模板语言：您将字符串编译为模板函数，然后运行该函数以生成字符串。 HTMLBars 将字符串编译成模板，但模板不生成字符串，它生成 DOM 节点。简单的答案是，您将无法使用 HTMLBars 做与使用 Handlebars 相同的事情。我建议在您的代码中添加另一个字符串模板库（可能是 Handlebars），或者让视图处理 HTMLBars 模板，如 this question 所示。

如果您好奇，下面是 HTMLBars 模板对象在编译后的样子（从 JSBin 控制台转储中获得）：

[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;
    }
}

【讨论】：