如何編譯內聯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那樣產生函數。 車把是一種字符串模板語言：您將字符串編譯為模板函數，然后運行該函數以生成字符串。 HTMLBars將字符串編譯成模板，但是模板不生成字符串，而是生成DOM節點。 簡單的答案是，您將無法使用HTMLBars完成與Handlebars相同的操作。 我建議您在代碼中添加另一個字符串模板庫（也許是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;
    }
}