如何将大豆模板返回值作为DOM节点附加到文档正文中？

Question

我目前正在通过以下方式将Google Closure Soy模板附加到HTML文档的正文中

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') ，但这将涉及浏览goog.dom.$('idOfMyHeader')操作，因为在显示标题之后，会将新的DOM节点附加到标题中。

Answer 1

是否有将大豆模板（例如标头）转换为DOM节点的便捷方法？

可以使用Soy JavaScript库函数soy.renderAsFragment将闭包模板呈现为DOM片段。

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属性。