jquery - 具有语义 UI 下拉行为的 Meteor 不起作用

Question

我目前正在尝试将语义 UI 集成到我的应用程序中。视觉风格显示得很好。但是，行为似乎不起作用，我无法在控制台中引发任何形式的异常来帮助调试。

• 我在 https://github.com/andersr/semantic-test 创建了一个 Meteor 测试应用程序
• 我在控制台中没有看到任何异常，并且不确定如何解决此问题。如有任何建议，我们将不胜感激。

一些相关的代码片段:

用户导航下拉列表的标记:


<div class="ui dropdown link item">
{{currentUser.name}}
<i class="dropdown icon"></i>
<div class="menu">
<a class="item">Sign Out</a>
</div>
</div>


custom.semantic.json 文件:

{
  "definitions": {
  ...
  "dropdown": true,
  ...
 }

}

调用/client/client.js 中的下拉菜单(尽管不确定是否需要):

$('.dropdown').dropdown({
  transition: 'drop'
});

Answer 1

当相应的 HTML 元素插入到 DOM 中时，需要初始化

jQuery 插件，这通常是标准服务器端渲染的 Web 应用程序的情况，但 Meteor 通过使用客户端采取了不同的方法响应式模板，所有 HTML 生成都在浏览器中完成。

这就是为什么当 Meteor 在文档中插入下拉菜单时需要初始化 jQuery 插件，您可以使用模板 onRendered 生命周期事件来检测何时可以安全地激活小部件行为。

JS

Template.dropdown.onRendered(function(){
  this.$(".dropdown").dropdown();
});

HTML

<template name="dropdown">
  <div class="ui dropdown link item">
    {{currentUser.name}} <i class="dropdown icon"></i>
    <div class="menu">
      <a class="item">Sign Out</a>
    </div>
  </div>
</template>