使用 Iron Router、Jquery、Materialize 进行组件初始化

Question

在这里挣扎于一个简单的$( document ).ready()。

不知道我做错了什么。

Materialize 需要在 DOM 就绪 上初始化 jquery 组件。找到一种方法来初始化所有视图上的组件非常棘手。

这里是在线DEMO

通过阅读文档：这应该初始化子模板所需的所有内容：

Template.layout.rendered = function(){ 

  $('ul.tabs').tabs() 

  }
}

但是，这仅适用于硬页面刷新，不适用于路由视图的链接。

因此，您必须在每个模板上初始化该元素将被使用

Template.x.rendered ...

Template.y.rendered ...

这里是github code

顺便说一句，我们已经尝试过铁路由器事件：

onRun

onBeforeAction

onAfterAction

所有这些似乎都发生在路由的模板内容出现之前。我注意到 onBeforeAction 需要调用 this.next() 才能继续，我什至尝试在下一次调用后查找 DOM 内容。

我也尝试像这样重写我们的路线：

Router.route('someRoute', function() {
  this.render('someRoute');
  // look for DOM content, still not found
});

Answer 1

需要明确的是，发生这种情况的原因是因为您的布局只触发了渲染的钩子一次。当您切换路线时，布局模板不会被重新渲染，只有屈服区域中的模板会被重新渲染。该区域中的前一个模板被破坏，下一个模板被重新渲染。这意味着您必须为该模板再次运行 $('ul.tabs').tabs()，因为它包含的 DOM 元素被重新渲染。

将该代码放在使用它的模板的渲染函数中是可行的，因为每次该特定模板再次渲染时，该渲染钩子都会运行。

您可以解决此问题的一种方法是专门为您的选项卡创建一个模板，就像某种方式的控件一样，它在自己的渲染函数中调用$('ul.tabs').tabs()。然后，您可以将此控件放在需要它的模板上并传递所需的参数，例如选项卡的数量和每个选项卡的内容等。不过，这有点工作，如果我有一个非常大的数字，我只会考虑它使用选项卡控件的模板。