Question

我目前正在尝试将Semantic 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

当在DOM中插入相应的HTML元素时，

jQuery插件需要初始化，这在标准服务器端渲染的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无法正常工作

1 个答案: