Meteor'da Malzeme CSS Tabs nasıl kullanılır?

Question

Yeni, Meteor.js ve Materialize CSS Framework. Bir kullanıcının sekmeleri 3 farklı değere dinamik olarak nasıl bağlayacağını tam olarak anlayamıyorum, böylece bir kullanıcı tıklattığında, .tab indicator/active özelliği istenen rota yolu ile birlikte kaydırılır. Eğer bunu yaparsam:

istemci/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> 

istemci/

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

göstergeleri çalışmıyor sekme app.js ancak yok bağlantıları doğru sayfaya dönüştür. Sayfasına gitme özelliğini engelliyor gibi. Bunu nasıl yapacağım konusunda yardıma ihtiyacım var, şu an bir süredir buradayım. Teşekkürler.

Answer 1

Başka Güncelleme Eğer o

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); 
    } 
}) 

Yönlendirici gibi bir şey yapabilirsiniz her sekmeyi tanımlamak istemiyorsanız

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

Eğer Router olmadan sekmeleri render ile Tamam, bu belki yararlı.

Şimdi bu sekme tıklama temelinde şeyler işlemek isteyen şablonlar diyelim:

sizin render alanında Şimdi

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

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

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

: javascript dosyasında Nihayet

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

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

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

:

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() {'yerine' Template.tabs.rendered = function() {'' yi deneyin.

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