Hey thanks @nobso. By the way I don’t think you need to call upgradeAllRegistered as my package does that for ya. If it does not work that way for you then… well… we obviously have a bug somewhere.
I don’t see any issue as of now with your package. It works cool!
I just tested initially with that code and removed that after adding your package.
@nobso
Good to know. If you encounter any issue later (I believe there are a lot) and would like to help make the package better, feel free to fire them up in my git repo, better with some code example to reproduce the issues.
Of course! I will do 
What would be the benefit of using the MDL package vs. the CDN ?
In my opinion, MDL package will take care of the event attachments to the DOM elements. If you use the MDL from the CDN directly, only the CSS will work and not the MDL’s JS functionalities. So the work around is as mentioned in the Material Design Lite. But you dont want to mention that for every template in your project if you use MDL package as its handled at the global context.
@richenglish & cc @nobso
There are issues with using MDL directly with Meteor. I listed a few in the Readme file in my repo. For example, if you have some template code like:
{{#if someFlag}}
<button class="mdl-js-button">Button A</button>
{{else}}
<button class="mdl-js-button">Button B</button>
{{/if}}
Assume someFlag initially was set to true, and it would look fine if button A has been rendered already at document.load. Now at the time when someFlag is set to false, this portion of the template will be re-rendered by Blaze. And since the official MDL only scans for upgradable components at document.load, it won’t do anything for the newly rendered button B. The CSS may still work, but the js part won’t be there. If those buttons had ripple effects then they are pretty much useless unless you find your best timing to upgrade them.
My package does (or at least tries to do) this for you.
Hey @zodiase , how do we choose a different theme? For now, i’ve included the CSS from the Google CDN in my page level template.
Isn’t there any configuration in your package that i can use to choose the theme?
@nobso
I actually thought about this. I think instead of supporting dozens of pre-defined themes that the official MDL build contains, most of the users might end up using their own themes. I mean, even 100 options are not better than unlimited freedom. Also the extra support for that many options would add unnecessary weight to the package.
Not sure if google will go for it, but I’ve asked them to add autopublish support (https://github.com/google/material-design-lite/issues/1040). This will bring the MDL in line with MaterializeCSS which also presently supports autopublish.
Just made this forum post:
I’ve just tested all of the available MDL packages with this meteorpad and none of the packages support ripples with {{#if}} statements, including yours. I installed your package anyway, as you seem to go a bit deeper than the rest. And gave you a star for the activity
@KristerV
I had a look and it seems for some reason MeteorPad is not able to load the latest version of my package, which should be 1.0.0-4 at the moment. (Seems like MeteorPad is only able to find version 0.0.1.) I believe if you test locally that demo should work just fine.
We have just published a package that makes it easier to use MDL with Meteor. It wrapps the MDL elements in Blaze block helpers and handles upgrades and reactive values automatically. Check it out at https://atmospherejs.com/synka/mdl.
2 Likes
Material Design Lite is sleek! Check out Google’s new app, called Primer which uses cards and a lot of MDL features. Nice use of buttons and added effects for a better UX.
Just for the record of this, and as previous commenters have already brought this up. You can create a wrapper template to wrap your MDL components like so:
Template
<template name="mdl">
{{> UI.contentBlock }}
</template>
JavaScript
let tpl = Template.mdl;
tpl.onRendered ( function () {
componentHandler.upgradeAllRegistered();
} );
Usage
{{# mdl }}
<!-- Your MDL Component -->
{{/ mdl }}
Usage: Alternative
{{> mdl }}
<!-- Your MDL Component -->