如何在 Handlebars 模板中初始化 jQuery 小部件？

How to initialize jQuery widget in Handlebars template?

我有一个带有 jQuery 手风琴的 test.hbs 文件：

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
</div>

如何在 test.hbs 文件中初始化手风琴？

  $(function() {
    $( "#accordion" ).accordion();
  });

谢谢。

由于 handlebars 生成字符串而不是 DOM 元素，这有点棘手。有一些解决方案可以将 handlebars 扩展到基于 DOM 的模板引擎中（例如，参见已弃用的 DOMBars 项目）。

我创建了一个 handlebars 助手，它可以使用 MutationObserver for detecting when the relevant piece of html gets added. (Browser support info, see webcomponents-lite 作为 polyfill 获取 DOM 元素。

这是 GitHub and a demo 中的实用程序。

示例模板：

<p>Here is a plugin:</p>
{{#jqinit 'accordion'}}
<div>
    <h3>Section 1</h3>
    <div><p>Mauris mauris ante...</p></div>
    <h3>Section 2</h3>
    <div><p>Sed non urna...</p></div>
</div>
{{/jqinit}}

相关代码简要说明：

watch.js 定义了一个函数 forHtml(html, callback)，它在 DOM 中遇到给定的 html 时触发回调。它修改 html 以暂时具有使其独一无二的 class。

jQueryHelpers.js 定义助手 jqinit，它使用 watch.forHtml 函数监视助手定义的块，然后调用 DOM 元素上的函数.帮助程序将函数名称作为第一个参数，并且可以选择一个 JSON 对象，该对象被解析并作为参数传递给函数。