Get gumby.js rolling with meteor

Question

I'm trying to get the Gumby.js library to work with Meteor, but cant get it to work.

I've tried both installing it manually in /client/lib folder and using 'mrt add gumby'. The CSS part seems to work pretty fine with the grid working perfectly, but the JS modules dont work.

I'm setting a responsive Navbar just like this

<template name="nav">
  <div class="row navbar centered" id="nav1">
    <!-- Toggle for mobile navigation, targeting the <ul> -->
    <a id="nav-toggle" class="toggle" gumby-trigger="#nav-ul" href="#"><i class="icon-menu"></i></a>
    <ul id="nav-ul" class="eight columns">
      <li><a href="#">Quienes somos</a></li>
      <li><a href="#">Marcas</a></li>
      <li><a href="#" class="skip" gumby-goto="servicios">Servicios</a></li>
      <li><a href="#">Laboratorios</a></li>
      <li><a href="#">Contacto</a></li>
      <li><a href="#">Otros</a></li>
    </ul>
  </div>
</template>

but the menu just does not popup on mobile width. And other modules like Folders and skip dont work at all when defined.

you can see a sample here

any idea on how to get it up and running?

Answer 1

Not sure about the real situation, because the js files are packed in the website and it's hard for me to tell from the source code. However, there is some clue you may find useful.

I assume you want to run the js script after the template is rendered. In this case, you need to write like this.

Template.nav.rendered = function() {
  // Run the js to render the dropdown or whatever.
}

This is the Meteor programming paradigm. If you simply run the js files directly, the template may not be ready when you run that part of the code. The "rendered" callback is the place you need to place some actions after this template is ready.

In addition, you can refer the official document here http://docs.meteor.com/#template_rendered