使用Foundation5 Javascript模块时在Meteor中呈现古怪

我一直在使用Foundation5和一个新的Meteor应用程序，CSS对我来说很好

但是我在正确安排javascript使用诸如Orbiter滑块之类的高级功能时遇到了一些问题

< >我从客户机/兼容性目录中添加基础JavaScript，这样它就不会被流星包裹。

问题：

a。希望将基础添加到HTML的<代码> <代码>中，因为它初始化FASTLCAT，它希望存在体元素。我简单地注释了FASTLCAK初始化，并确保在jQuery和AdvestZr之后基础负载。这似乎是足够的。是否有更好的方法允许进行Fastclick初始化

b。在标签的末尾是Zurb说，应该使用jQuery调用初始化基础插件，如：

$(document).foundation( -- settings objects -- );

我试着简单地将脚本块放在主模板的底部，但这似乎不起作用。因此，在模板中似乎没有一种有效的方法来正确执行此操作。我想Meteor的方法是让这样的代码驻留在模板。*.rendered函数中，或者在helpers中，或者在某个地方触发模板的反应式重新呈现

Template.layout.rendered = function () {
   $(document).foundation({
     orbit: {
         // options
     }
   });
};

所以我尝试了Template.*呈现函数，它可以正常工作。在某些浏览器（webkit）中，滑块在初始加载带有模板的页面时呈现。但不是在Firefox中。我还没有测试过IE

但在所有浏览器中，如果我在meteor应用程序（我使用的是iron router routes）中导航到一个没有滑块的页面，然后再返回，滑块不会呈现。我已经确认正在调用带有orbit滑块初始化的Template.*.rendered代码，我可以看到它在Chrome的开发者视图中作用于DOM元素

很偶然，我调整了浏览器窗口的大小，弹出了滑块，并且工作得很好。可以肯定的是，对于我使用的所有浏览器，只需调整窗口大小即可显示滑块

我尝试将模板元素包装在{{{#constant}}块中——没有明显的变化

我现在已经尝试了我在StackOverflow和其他地方找到的6种不同的方法，试图让浏览器在没有任何运气的情况下重新绘制DOM——我猜如果我能在正确的时间以正确的方式调用DOM，其中一种方法会行得通，但即使是这样，如果我做得正确，确实应该有办法避免所有这些

所以DOM在页面上，javascript在DOM上运行和操作，但我需要告诉页面实际绘制DOM

---

有什么想法吗？

< P>我在流星项目上也使用了基础5。 从template.rendered事件调用$（document）.foundation（）是正确的方法。每次当流星重新绘制DOM时，地基就会断裂。有时，特征可以在不重新启动基础的情况下逃脱，但对于一切工作，它需要重新启动。在您的情况下，在重新执行$（document）.foundation（）之后，我认为只需调用$（window）.resize（）即可：

    Template.layout.rendered = function () {
       $(document).foundation({
         orbit: {
             // options
         }
       });
       $(window).resize();
    };

---

是的，谢谢。我对这个简单答案的所有搜索都提出了更复杂的方法来从浏览器中重新绘制。像往常一样，一个小小的JQuery可以起到很大的作用。那么每个模板渲染都会导致基础重新初始化？或者您是否有一个策略来最小化问题的这一方面？这取决于您的布局，但您可以尝试将重新初始化本地化。例如，如果你的轨道器滑块包含在一个区域内，你可以做$$（‘yultFuleFrordButter’）.Buffic（）。而且，你可以选择只重新初始化轨道滑块，而不是使用$（文档）.Fund（‘轨道’，{/*选项*/}）的所有基础。最后，如果您的动态观察滑块都包含在一个模板中，则可以将template.rendered事件的范围最小化为仅包含该模板。Template.templateContainingOrbitSliders.rendered=function（）{}。我将结合使用您推荐的最后两种方法。确定对orbit的调用的范围，并在orbiter所在的特定模板的呈现回调中调用它。似乎是可行的，但我需要进行实验，看看多个模板是否可以包含不同的初始值设定项，比如显示或下拉列表。