如何編譯內聯HTMLBars模板？

Question

我有內聯模板，我用來編譯像這樣（在JavaScript模板）（其中temp是把手字符串）：

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模板，如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; 
    } 
}