Как использовать Materialize css Tabs в Meteor?

Question

Новое для Meteor.js и Materialize CSS Framework. Я не совсем понимаю, как можно динамически подключать вкладки к 3-мя различным динамикам, поэтому, когда пользователь нажимает на нее, свойство .tab indicator/active перемещается вместе с желаемым маршрутом маршрута. Если бы я это сделать:

клиент/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> 

клиент/app.js

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

Вкладка индикаторы работают, но это не делает измените ссылки на правильную страницу. Его, как его блокировка, возможность перейти на страницу. Мне нужна помощь в том, как это сделать, я был на этом некоторое время. Благодарю.

Answer 1

Другой Update, если вы не хотите, чтобы определить каждую вкладку, которую вы можете сделать что-то подобное

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

Это может быть полезно, если вы хорошо с рендеринга вкладки без Router.

Допустим, эти шаблоны, которые вы хотите, чтобы сделать материал на основе вкладок нажмите:

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

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

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

Теперь в вашем районе рендеринга:

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

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

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

Наконец в вашем файла 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

Попробуйте 'Template.tabs.onRendered (function() {' вместо 'Template.tabs.rendered = function() {'

В конце концов, ваша инициализация вкладок должна выглядеть так:

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