Question

在这里苦苦挣扎，简单$( document ).ready()。

不确定我做错了什么。

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

此处是在线DEMO

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

Template.layout.rendered = function(){ 

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

  }
}

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

因此，您必须在每个模板上初始化要使用的元素

Template.x.rendered ...

Template.y.rendered ...

此处是github code

BTW我们尝试过铁路路由器事件：

onRun

onBeforeAction

onAfterAction

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

我也试过改写这样的路线：

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

Answer 1

为了清楚起见，发生这种情况的原因是因为你的布局只触发渲染的一次钩子。切换路径时，不会重新呈现布局模板，只会生成yield区域中的模板。该区域中的先前模板被销毁，下一个模板被重新渲染。这意味着您必须再次为该模板运行$('ul.tabs').tabs()，因为它包含的DOM元素将被重新呈现。

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

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

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

1 个答案: