我目前正在尝试将语义 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'
});
最佳答案
当相应的 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>
关于jquery - 具有语义 UI 下拉行为的 Meteor 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30834655/