2

現在、HTMLドキュメントの本文にGoogleClosureSoyテンプレートを追加しています。

var header = app.ui.templates.home.header();
document.body.innerHTML =
  header + app.ui.templates.home.bottom({
      "widgets": widgets,
  });

ただし、大豆テンプレートコンストラクターはDOMノードを返さないため、これが最適であるとは思いません。したがって、私は呼び出しを言うことはできませんgoog.dom.appendChild(header, someNewElementICreated);。

header大豆テンプレート（たとえば）をDOMノードに変換する便利な方法はありますか？を呼び出すこともできgoog.dom.$('idOfMyHeader')ますが、ヘッダーが既に表示された後に新しいDOMノードがヘッダーに追加されるため、ブラウザーのリフロー操作が必要になります。

4

1 に答える 1

4

大豆テンプレート（ヘッダーなど）をDOMノードに変換する便利な方法はありますか？

クロージャテンプレートは、SoyJavaScriptライブラリ関数を使用してDOMフラグメントとしてレンダリングできますsoy.renderAsFragment。

app.js

goog.require('app.ui.templates');
goog.require('soy');

var fragment = soy.renderAsFragment(app.ui.templates.myTemplate, null /*data*/);
goog.dom.appendChild(goog.dom.getElementsByTagNameAndClass('body')[0],
    /** @type {Node} */ (fragment));

templates.soy

{namespace app.ui.templates}

{template .myTemplate}
  <div>
    ...
  </div>
{/template}

この場合、レンダリングされたテンプレートは要素ノードであるため、にキャストしNodeてDOMに追加することができます。ただし、div 要素をプレースホルダーとして使用し、innerHTML属性を設定する方が一般的です。

于 2012-07-22T22:57:22.277 に答える