2

I planned to use materialize:materialize package to a meteor app. As I can understand materialize use a lot of javascript for effects, collapsing and so on. Meteor has its own event handling but I suppose materialize will use jquery (I suppose I don't need to add jquery, it's included, or?) and will be running outside meteor events.

Is it enough to just add the package and everything will work, not just the look but also the javascript (feel)? I am trying to get it to work with a materialize template I bought and its not optimezed for meteor so I have problems to make it work.

Has anyone try this setup and is there any suggestions for good sources.

user2856066
  • 821
  • 1
  • 11
  • 20

1 Answers1

8

Using materializecss with Meteor works great, but you will have to initialize jQuery plugins yourself (just like in a regular HTML5 app without Meteor, as Materialize docs hints at).

Meteor templating system includes automatically jQuery, and you will have to use template.onRendered to correctly initialize the plugins, as opposed to initializing them in a $(document).ready callback.

For example, here is a simple Materialize dropdown markup inside a Meteor template :

<template name="myDropdown">
  <a class="dropdown-button" data-activates="my-dropdown">
    My Dropdown <i class="mdi-navigation-arrow-drop-down right"></i>
  </a>
  <ul id="my-dropdown" class="dropdown-content">
    <li class="js-first-item"><a>First item</a></li>
    <li class="js-second-item"><a>Second item</a></li>
    <li class="divider"></li>
    <li class="js-third-item"><a>Third item</a></li>
  </ul>
</template>

And here is the according plugin initialization :

Template.myDropdown.onRendered(function(){
  this.$(".dropdown-button").dropdown({
    hover:false
  });
});

You should use standard Meteor events to handle user interaction :

Template.myDropdown.events({
  "click .js-first-item": function(event, template){
    console.log("clicked on the first item !");
  },
  [..]
});

Overall, your Materialize theme integration into your Meteor app is not something as trivial as droping the theme inside your source files and meteor adding materialize:materialize, but it should not be something overly difficult.

Sometimes you'll hit Meteor related issues when trying to initialize Materialize plugins but the corresponding markup is not yet rendered into the DOM, see this question for a possible solution : Meteor + Materialize: collapsable in for each doesn't work

Community
  • 1
  • 1
saimeunt
  • 22,666
  • 2
  • 56
  • 61
  • Have you tried to get the [`materialbox`](http://materializecss.com/media.html) component working? I find that after you dismiss the englarged image, the component does not reinitialize (I'm using Iron Router and it's in a `> yield` section). It also just generally doesn't display the image correctly when it enlarges. – Dan May 26 '15 at 14:44
  • Works seamlessly for me, also using `iron:router` and a `{{> yield}}` section. Try reproducing the problem in a minimal project because maybe some other part of your app is messing with the plugin ? – saimeunt May 26 '15 at 14:55
  • OK thanks for checking it out. I'll try make a minimal reproduction of the bug when I get a chance. – Dan May 26 '15 at 14:58
  • Thanks for a well written answer. I will investigate it more but maybe I think its to much fix / complicated to get it to work. I used semantic-ui in an other app and its much more straight forward. I will see if the extra work is worth the effort. / Thanks a lot – user2856066 May 26 '15 at 21:29