2

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

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

但是，我不认为这是最优的，因为大豆模板构造函数不返回 DOM 节点。因此，我不能说 call goog.dom.appendChild(header, someNewElementICreated);。

有没有一种方便的方法可以将大豆模板（比如header）转换为 DOM 节点？我可以只调用goog.dom.$('idOfMyHeader')，但这将涉及浏览器重排操作，因为在标头已显示后，新的 DOM 节点将附加到标头。

4

1 回答 1

4

有没有一种方便的方法可以将大豆模板（比如标题）转换为 DOM 节点？

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

应用程序.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));

模板.soy

{namespace app.ui.templates}

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

由于在这种情况下渲染的模板是一个元素节点，它可以被强制转换为 aNode并附加到 DOM。但是，更常见的是使用div 元素作为占位符并设置innerHTML属性。

于 2012-07-22T22:57:22.277 回答