Meteor + Blaze + FlowRouter + Materialize + jQuery DomReady

help
1

I haven’t found a suitable answers for the following - What’s the best way to fire a domReady event when a new route is established, and a template is rendered. I feel like:

Template.edit.onRendered(function(){

is where $( document ).ready(function() should be executed, but I’m a little confused, based on the reactive nature, if the variables are being updated, doesn’t that mean that the event is going to be run numerous times, and the domready event is being fired for numerous templates? Does that event need to be destroyed at some point? Or should Flow Router handle it?

The trouble I’m having is with the jQuery components with Materialize. Tabs not being rendered, accordions, etc. What’s the appropriate way to initialize these components?

2

Just my two cents, but throw what you know about things like $().ready out the window. It’s much easier (and more predictable IMO) to rely on triggers that are built around your data.

Trying to listen for the “ready” state of dom elements is tough. Things like tabs and accordions are much easier to manage if you build them into their own template, as the onRendered callback is much more predictable. For example, if you are using tabs:

<template name="myTemplate">
  <!-- some content -->
  {{> jTabs}}
</template>

<template name="jTabs">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
      <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris.</p>
    </div>
    <div id="tabs-2">
      <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. </p>
    </div>
    <div id="tabs-3">
      <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p>
    </div>
  </div>
</template>

and then:

Template.jTabs.onRendered(function () {
  $( "#tabs" ).tabs();
});
1 Like