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

我有一个jQuery手风琴test.hbs文件：如何初始化Handlebars模板中的jQuery小部件？

<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(); 
    });

谢谢。

来源

2015-11-13 Ralph David Abernathy

由于handlebars生成字符串而不是DOM元素，这有点棘手。有一些将句柄扩展到基于DOM的模板引擎的解决方案（例如，请参阅不推荐的DOMBars项目）。

我已经创建了一个handlebars帮助器，它可以使用MutationObserver来获取DOM元素的持有时间，以检测何时添加了相关的html片段。（Browser support信息，请参见webcomponents-lite用于polyfill）。

以下是GitHub和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，暂时让它有一个独特的类。

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

来源

2015-12-20 23:40:16 ekuusela

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

回答

相关问题