语义UI下拉行为不起作用的流星

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, 
    ... 
} 

}

调用t他在下拉列表中/client/client.js（虽然不知道这是需要）：

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

Answer 1

jQuery插件需要在相应的HTML元素已经在DOM，这是通常的情况下被插入到被initalized标准的服务器端渲染webapps，但流星采用不同的方法，通过使用客户端反应模板，所有的HTML生成都在浏览器中完成。

这就是为什么你需要初始化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>