我有一个带有 jQuery Accordion 的 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 文件中初始化此 Accordion ?
$(function() {
$( "#accordion" ).accordion();
});
谢谢。
最佳答案
由于 Handlebars 生成字符串而不是 DOM 元素,这有点棘手。有一些解决方案可以将 Handlebars 扩展到基于 DOM 的模板引擎(例如,请参阅已弃用的 DOMBars 项目)。
我创建了一个 Handlebars 助手,可以使用 MutationObserver 来获取 DOM 元素用于检测何时添加相关的 html 片段。 ( Browser support 信息,请参阅 webcomponents-lite 了解填充)。
示例模板:
<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 以暂时拥有一个使其独一无二的类。
jQueryHelpers.js定义助手 jqinit
,它使用 watch.forHtml
函数来监视助手定义的 block ,然后调用 DOM 元素上的函数。该帮助器将函数名称作为第一个参数,还可以选择将 JSON 对象作为参数进行解析并传递给函数。
关于javascript - 如何在 Handlebars 模板中初始化 jQuery 小部件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33699424/