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

Question

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

我在 https://github.com/andersr/semantic-test
我在控制台中没有看到任何异常，我不确定如何解决这个问题。如有任何建议，我们将不胜感激。

一些相关代码片段：

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

<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>

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

Meteor with Semantic UI dropdown behavior not working

jquery

meteor

semantic-ui