Meteor JS - Displaying DOM elements on specific models

advertisements

I do my first app with meteor js and I need suggestions about showing elements on specific templates. I have header which stays for all templates and content div where templates switches with iron router. I have two buttons on header which wont be shown on some template so I have to hide/show it on specific templates.

Now I made for every template helper function which is attached to main div onload. In that function there are some jQuery hide() and show() functions. I feel it is not the best solutions and I'm quite curious if somebody uses better method to show/hide elements on different templates.


In Meteor you typically don't need to do things like attaching to div onload.

Let's say your header has 3 items, one that is always there and two buttons: (leaving out the bootstrap markup for clarity)

<Template name="header">
  <ul>
    <li>Menu item</li>
  </ul>
  <button>Button 1</button>
  <button>Button 2</button>
</template>

Then you can simply define a helper for the header:

Template.header.helpers({
  showButtons: function(){
     return (some logic that evaluates to true or false);
  }
});

And then modify your header to:

<Template name="header">
  <ul>
    <li>Menu item</li>
  </ul>
    {{#if showButtons}}
      <button>Button 1</button>
      <button>Button 2</button>
    {{/if}}
</template>

No jQuery, no DOM manipulation, no fuss, and completely reactive if some condition in the logic changes and you need to show/hide the buttons while you're still in the same route.