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

Question

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

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

一些相关代码sn-ps：

用户导航下拉菜单的标记：

<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

jQuery 插件需要在相应的 HTML 元素被插入到 DOM 时被初始化，这在标准的服务器端渲染的 webapps 中通常是这种情况，但是 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>