2

私はそのようにコンパイルするために使用したインラインテンプレート（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 のレンダリング時にモデルを使用しません。私は近いと思いますが、モデルを注入する方法がよくわかりません。

4

1 に答える 1

3

HTMLBars は、Handlebars が行ったような関数を生成しません。Handlebars は文字列テンプレート言語でした。文字列をテンプレート関数にコンパイルし、その関数を実行して文字列を生成します。HTMLBars は文字列をテンプレートにコンパイルしますが、テンプレートは文字列を生成せず、DOM ノードを生成します。簡単な答えは、Handlebars で行ったのと同じことを HTMLBars で行うことはできないということです。コードに別の文字列テンプレート ライブラリ (おそらくハンドルバー) を追加するか、この質問に見られるようにビューに 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;
    }
}
于 2015-04-02T13:32:06.127 に答える