1

Struggling here with what would otherwise be a simple $( document ).ready().

Not sure what I'm doing wrong.

Materialize needs jquery components to be initialized on DOM ready. Finding a way to initialize components on all views is surprisingly tricky.

Here is the online DEMO

From reading the docs: this should initialize everything the sub-templates require:

Template.layout.rendered = function(){ 

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

  }
}

However, this only works on a hard page refresh, and not with links routing the views.

So instead you would have to initialize on each template that element will be used 

Template.x.rendered ...

Template.y.rendered ...

Here is the github code

BTW We've tried iron-router events:

onRun

onBeforeAction

onAfterAction

All of these seem to happen before the route's template content is present. I noticed that onBeforeAction required a call to this.next() to go on, I even tried looking for the DOM content after the next call.

I also tried rewriting our routes like this:

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

1 回答 1

0

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

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

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

于 2015-04-11T05:59:26.663 回答