如何在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();
});
谢谢。
由于handlerbs生成字符串而不是DOM元素,所以这有点棘手。有一些解决方案可以将手柄扩展到基于DOM的模板引擎中(例如,请参阅不推荐使用的DOMBars项目)。
我创建了一个手把助手,它可以使用MutationObserver获取DOM元素,以便在添加相关html时进行检测。(浏览器支持信息,请参阅webcomponents lite了解polyfill)。
这是GitHub中的实用程序和演示。
示例模板:
<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元素上的函数。helper将函数名作为第一个参数,还可以选择解析并作为参数传递给函数的JSON对象。
相关文章:
- 在XMLHttpRequest之后重新初始化jQuery
- 通过删除其相关的 DOM 存在来重新初始化 jQuery 插件
- 如何在初始化jQuery.ajax成功函数后覆盖它
- 初始化 jQuery 数据表中的搜索输入
- 在多个动态添加的表单上初始化 jQuery validate() 函数
- 无法在按钮单击Ajax调用时初始化Jquery数据表
- ReactJS - 在 react 类中初始化 jquery 插件的标准方法是什么
- 如何在 AJAX 加载的选项卡中初始化 jquery 函数
- 在 AJAX 页面更新后重新初始化 jQuery 插件
- 是否可以在 ajax 调用后重新初始化 jQuery 的所有插件
- 防止重新定位导航初始化 jquery mmenu
- 如何重新初始化jQuery文件上传数据数组
- 从数据属性初始化JQuery插件
- 用于脚本加载的预初始化jQuery代码不起作用
- 使用数组的本地数组作为数据源初始化Jquery DataTable
- 如何在Handlebars模板中初始化jQuery小部件
- 初始化Jquery动画函数的值
- 在ajax之后重新初始化jquery中的变量
- 初始化jQuery返回空白页的数据表
- 加载附加信息后重新初始化jQuery