Foundation 5.3.1 选项卡不适用于 Meteor

Question

我正在使用来自 Atmosphere 的 Meteor v0.8.2 和 zf5 智能包 (https://atmospherejs.com/package/zf5)（最近更新到 Foundation v5.3.1）。我正在尝试使用垂直选项卡，但除了第一个活动的垂直选项卡外，我无法显示任何选项卡的内容。

我尝试在 index.html 和 layout.html 上手动包含智能包中的 Foundation JS/CSS 文件，切换到智能包 Foundation5-sass，仔细检查 JS 版本，添加 Meteor 的 jQuery 智能包，切换package.js (https://github.com/juliancwirko/meteor-zf5/blob/master/package.js) 中 add_files 方法的顺序，并使用 dl 和 dd 标签而不是文档中的 ul li 标签。我还尝试按照 zf5 智能包的自述文件中的建议使用 $(document).foundation('reflow');。

我不知道这是智能包的问题、Foundation 的问题，还是我忽略了一些非常明显的问题。以下是我在主页上使用的 HTML：

<!-- Chapter Tabs -->
<ul class="tabs vertical" data-tab>
   <li class="tab-title active"><a href="#intro">Introduction</a></li>
   <li class="tab-title"><a href="#chapter0">Chapter 0</a></li>
   <li class="tab-title"><a href="#chapter1">Chapter 1</a></li>
   <li class="tab-title"><a href="#chapter2">Chapter 2</a></li>
   <li class="tab-title"><a href="#chapter3">Chapter 3</a></li>
   <li class="tab-title"><a href="#chapter4">Chapter 4</a></li>
   <li class="tab-title"><a href="#chapter5">Chapter 5</a></li>
</ul>
<!-- Chapter Content -->
<div class="tabs-content vertical">
   <div class="content active" id="intro">
      <p>Introduction goes here.</p>
   </div><!-- end #chapter0 -->
   <div class="content" id="chapter0">
      <p>Chapter 0 goes here.</p>
   </div><!-- end #chapter0 -->
   <div class="content" id="chapter1">
      <p>Chapter 1 goes here.</p>
   </div><!-- end #chapter1 -->
   <div class="content" id="chapter2">
      <p>Chapter 2 goes here.</p>
   </div><!-- end #chapter2 -->
   <div class="content" id="chapter3">
      <p>Chapter 3 goes here.</p>
   </div><!-- end #chapter3 -->
   <div class="content" id="chapter4">
      <p>Chapter 4 goes here.</p>
   </div><!-- end #chapter4 -->
   <div class="content" id="chapter5">
      <p>Chapter 5 goes here.</p>
   </div><!-- end #chapter5 -->
</div><!-- end .tabs-content .vertical -->

这是 layout.html：

<template name="layout">
   <div class="container">
    {{> header}}
      <div class="main">
       {{> yield}}
      </div><!-- end .main -->
    {{> footer}}
   </div><!-- end .container -->

 <script>
    $(document).foundation('reflow');
 </script>
</template>

该项目尚未在 GitHub 上，但如果需要更多信息，我会立即更新。

Answer 1

尝试将你的标签放在一个模板中，比如 myTemplateWithTabs 渲染它（通过 Iron router yield 或 {{> myTemplateWithTabs}} 渲染它）并运行：

Template.myTemplateWithTabs.rendered = function () {
    $(document).foundation('reflow');
}

而不是像脚本标签那样在主模板中，它不会那样工作