如何编译内联 HTMLBars 模板？

Question

我有一个内联模板（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 时也没有使用模型。我想我已经接近了，但不太清楚如何注入模型。

Answer 1

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

中所示

如果你很好奇，下面是 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;
    }
}

如何编译内联 HTMLBars 模板？

How to compile inline HTMLBars templates?

javascript

ember.js

htmlbars