Meteor Handlebar + MDL tabbar not working as expected

1

Hello everyone. I am using Meteor 1.6 in combination with Material Design Lite (getmdl.io). The problem is, that the second of the approaches shown below produces different html code than the first one.

First approach: Working

 <div class="mdl-tabs__tab-bar">      
    <a href="#all-envs" class="mdl-tabs__tab is-active">All Envs</a>
    <a href="#dev" class="mdl-tabs__tab">dev</a>
    <a href="#test" class="mdl-tabs__tab">test</a>
</div>

Second approach: Not Working

 <div class="mdl-tabs__tab-bar">      
    <a href="#all-envs" class="mdl-tabs__tab is-active">All Envs</a>
    {{#each enviroments}}
    <a href="#{{namespace}}" class="mdl-tabs__tab">{{namespace}}</a>
    {{/each}}
</div>

HTML for one element from first approach : <a href="#dev" class="mdl-tabs__tab">dev<span class="mdl-tabs__ripple-container mdl-js-ripple-effect" data-upgraded=",MaterialRipple"><span class="mdl-ripple is-animating" style="width: 183.127px; height: 183.127px; transform: translate(-50%, -50%) translate(54px, 27px);"></span></span></a>

HTML for one element from second approach : <a href="#dev" class="mdl-tabs__tab">dev</a>

As you can see in second HTML the <span>......</span> is missing.

Am i doing something wrong and if yes, what can I do to fix it?

Any help would be highly appreciated!

2

Hmm, using two independent frameworks (MDL and Blaze) that both manipulate the DOM seems like a bad idea to me, seems like it could cause all sorts of conflicts. I would recommend using one of the Material frameworks built on Vue/React/Angular instead (so that you get one unified system).

I don’t know, maybe it is possible to successfully use them together, but to me it just seems like a can of worms.

3

First off, thanks for your response!

Secondly, I forgot to write in the first post that I am using https://github.com/Zodiase/meteor-mdl

I am unsure of what would be the difference/advantage if I use Vue/React/Angular with the respective MDL-Packages with Meteor instead of the current setup. Could you please elaborate on that?

Which frameworks/which combination would you recommend if I want to build an application with processing on the server side and a web frontend with MDL.

Thanks in advance.