Come utilizzare Materialize css Tabs in Meteor?

Question

Novità su Meteor.js e Materialize CSS Framework. Non capisco appieno come si colleghino le schede a 3 diverse in modo dinamico, quindi quando un utente fa clic su di esso, la proprietà .tab indicator/active si sposta lungo il percorso di instradamento desiderato. Se faccio questo:

client/app.html

<template name="tabs"> 
    <ul class="tabs nav-tabs hide-on-med-and-down"> 
     <li class="tab col s4" id="nt1"><a href="/page1">Page One</a></li> 
     <li class="tab col s4" id="nt2"><a href="/page2">Page Two</a></li> 
     <li class="tab col s4" id="nt3"><a href="/page3">Page Three</a></li> 
    </ul> 
    </template> 

client/app.js

Template.layout.rendered = function() { 
    $('ul.tabs').tabs(); 
    } 

La scheda indicatori di lavoro, ma non lo fa cambia i link alla pagina giusta È come se bloccasse la possibilità di andare alla pagina. Ho bisogno di aiuto su come farlo, ci sono già da un po 'di tempo. Grazie.

Answer 1

Un altro aggiornamento se non volete definire ogni scheda si può fare qualcosa di simile

Js

//Manual Method 
/*Template.tabs.rendered = function() { 
    if(Router.current().route.path() === '/page2'){ 
     $("#nt2 a").addClass('active'); 
    }else if(Router.current().route.path() === '/page3'){ 
     $("#nt3 a").addClass('active'); 
    } 
    $('ul.tabs').tabs(); 
} 


Template.tabs.events({ 
    'click #nt1': function(){ 
    Router.go('/'); 
    }, 
    'click #nt2': function(){ 
    Router.go('page2'); 
    }, 
    'click #nt3': function(){ 
    Router.go('page3'); 
    } 

})*/ 

//Auto Method 
Template.tabs.rendered = function() { 
    $("#"+Router.current().route.getName()).addClass('active');  
    $('ul.tabs').tabs(); 
    } 


Template.tabs.events({ 
    'click .tabs li': function(e, t){ 
    var href = e.target.id;  
    Router.go(href); 
    } 
}) 

Router

Router.configure({ 
    layoutTemplate: 'layout', 
}); 

Router.route('/', function() { 
    this.render('page-one'); 
},{ 
    name: 'page-one' 
}); 

Router.route('/page2', function() { 
    this.render('page-two'); 
},{ 
    name: 'page-two' 
}); 

Router.route('/page3', function() { 
    this.render('page-three'); 
},{ 
    name: 'page-three' 
}); 

Html

<template name="layout"> 
    {{> tabs}} 

    {{> yield}} 
</template> 
<template name="tabs"> 
    <!--Manual Method--> 
    <!--<ul class="tabs nav-tabs hide-on-med-and-down"> 
     <li class="tab col s4" id="nt1"><a href="/">Page One</a></li> 
     <li class="tab col s4" id="nt2"><a href="/page2">Page Two</a></li> 
     <li class="tab col s4" id="nt3"><a href="/page3">Page Three</a></li> 
    </ul>--> 

    <!--Auto Method--> 
    <ul class="tabs nav-tabs hide-on-med-and-down"> 
     <li class="tab col s4"><a id="page-one" href="/">Page One</a></li> 
     <li class="tab col s4"><a id="page-two" href="/page2">Page Two</a></li> 
     <li class="tab col s4"><a id="page-three" href="/page3">Page Three</a></li> 
    </ul> 
</template> 

<template name="page-one"> 
    <p>i am page-one</p> 
</template> 

<template name="page-two"> 
    <p>i am page-two</p> 
</template> 


<template name="page-three"> 
    <p>i am page-three</p> 
</template> 

Answer 2

Questo forse utile se si sta bene con il rendering schede senza Router.

Diciamo che questi sono i modelli che si desidera rendere roba sulla base di scheda clic:

<template name="page1"> 
..... 
</template> 

<template name="page2"> 
..... 
</template> 

<template name="page3"> 
..... 
</template> 

Ora nella vostra zona di rendering:

<template name="display"> 
    {{>tabs}} 
    {{#if activeTab 'nt1'}} 
     {{>page1}} 
    {{/if}} 

    {{#if activeTab 'nt2'}} 
     {{>page2}} 
    {{/if}} 

    {{#if activeTab 'nt3'}} 
     {{>page3}} 
    {{/if}} 
</template> 

Infine nel file javascript:

activeTab = new ReactiveVar('nt1'); //Your default tab 

Template.display.helpers({ 
    activeTab: function(tab){ 
     return (activeTab.get() == tab); 
}); 

Template.tabs.events({ 
    'click #nt1': function(){ 
    activeTab.set('nt1'); 
    }, 
    'click #nt2': function(){ 
    activeTab.set('nt2'); 
    }, 
    'click #nt3': function(){ 
    activeTab.set('nt3'); 
    } 
}); 

Answer 3

Prova 'Template.tabs.onRendered (function() {' invece di 'Template.tabs.rendered = function() {'

Alla fine, la vostra inizializzazione delle schede dovrebbe essere simile:

Template.tabs.onRendered(function(){ 
     $("ul.tabs").tabs(); 
    });