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

拉尔夫·大卫·阿伯纳西

我有一个带有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();
  });

谢谢你。

由于车把产生的是字符串而不是DOM元素,所以这有点棘手。有一些解决方案可以将车把扩展到基于DOM的模板引擎中(例如,请参见不推荐使用的DOMBars项目)。

我创建了一个把手助手,可以使用MutationObserver来获取DOM元素,以检测何时添加了相关的html片段。浏览器支持信息,有关polyfill的信息,请参见webcomponents-lite)。

这是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定义了helper jqinit,它使用该watch.forHtml函数来监视由该helper定义的块,然后在DOM元素上调用一个函数。助手将函数名称作为第一个参数,并可选地将一个JSON对象作为参数进行解析并将其作为参数传递给该函数。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在组件 VueJS 中初始化小部件?

来自分类Dev

如何使用Kotlin在android中初始化小部件

来自分类Dev

如何使用Kotlin在android中初始化小部件

来自分类Dev

在小部件中初始化StateProvider

来自分类Dev

实例“小部件”无法在初始化程序中访问

来自分类Dev

sitefinity小部件初始化KendoGrid

来自分类Dev

GWT:如何在UI活页夹中重新初始化窗口小部件,以丢弃其生命周期中获得的所有更改?

来自分类Dev

{{field}}如何在Django模板中显示field小部件?

来自分类Dev

内联HTML数据角色<>脚本jquery:Kendo小部件初始化

来自分类Dev

如何在类模板的构造函数中初始化向量成员变量

来自分类Dev

如何在Django模板中初始化变量并将其递增?

来自分类Dev

如何在Django模板中初始化变量并将其递增?

来自分类Dev

如何在 gentelella 模板中初始化离子范围滑块功能

来自分类Dev

jQuery模板中的nexusUI小部件

来自分类Dev

在页面上初始化jquery移动窗口小部件将显示“无法读取未定义的属性'jQuery ....'”

来自分类Dev

如何在模板中初始化为零/ NULL

来自分类Dev

如何在同时也是控件模板的 js 小部件中向 Kendo 模板提供数据

来自分类Dev

如何初始化模板大小的数组?

来自分类Dev

如何在jQuery滑块中初始化默认值?

来自分类Dev

默认初始化模板中的指针

来自分类Dev

如何在指定的初始化程序中调用协议扩展初始化程序?

来自分类Dev

如何在VBA中初始化对象的属性的帮助下初始化对象

来自分类Dev

如何在C ++ 11中将参数的数组初始化器迁移到可变模板参数

来自分类Dev

如何在覆盖的区域模板中维护小部件的正确顺序?

来自分类Dev

如何在Django-CMS的多个模板中共享插件(侧栏小部件中的内容)?

来自分类Dev

如何在XBAP / Prism中初始化Shell?

来自分类Dev

如何在Fragment中再次初始化相机?

来自分类Dev

如何在VHDL中初始化位向量

来自分类Dev

如何在子特征中初始化特征的val?

Related 相关文章

  1. 1

    如何在组件 VueJS 中初始化小部件?

  2. 2

    如何使用Kotlin在android中初始化小部件

  3. 3

    如何使用Kotlin在android中初始化小部件

  4. 4

    在小部件中初始化StateProvider

  5. 5

    实例“小部件”无法在初始化程序中访问

  6. 6

    sitefinity小部件初始化KendoGrid

  7. 7

    GWT:如何在UI活页夹中重新初始化窗口小部件,以丢弃其生命周期中获得的所有更改?

  8. 8

    {{field}}如何在Django模板中显示field小部件?

  9. 9

    内联HTML数据角色<>脚本jquery:Kendo小部件初始化

  10. 10

    如何在类模板的构造函数中初始化向量成员变量

  11. 11

    如何在Django模板中初始化变量并将其递增?

  12. 12

    如何在Django模板中初始化变量并将其递增?

  13. 13

    如何在 gentelella 模板中初始化离子范围滑块功能

  14. 14

    jQuery模板中的nexusUI小部件

  15. 15

    在页面上初始化jquery移动窗口小部件将显示“无法读取未定义的属性'jQuery ....'”

  16. 16

    如何在模板中初始化为零/ NULL

  17. 17

    如何在同时也是控件模板的 js 小部件中向 Kendo 模板提供数据

  18. 18

    如何初始化模板大小的数组?

  19. 19

    如何在jQuery滑块中初始化默认值?

  20. 20

    默认初始化模板中的指针

  21. 21

    如何在指定的初始化程序中调用协议扩展初始化程序?

  22. 22

    如何在VBA中初始化对象的属性的帮助下初始化对象

  23. 23

    如何在C ++ 11中将参数的数组初始化器迁移到可变模板参数

  24. 24

    如何在覆盖的区域模板中维护小部件的正确顺序?

  25. 25

    如何在Django-CMS的多个模板中共享插件(侧栏小部件中的内容)?

  26. 26

    如何在XBAP / Prism中初始化Shell?

  27. 27

    如何在Fragment中再次初始化相机?

  28. 28

    如何在VHDL中初始化位向量

  29. 29

    如何在子特征中初始化特征的val?

热门标签

归档