0

私の meteor.js アプリには、次のテンプレートがあります。

    <ul class="nav nav-tabs" id="userTabs">
        {{#if tabIs "editedTab"}}
            <li class="active">
                <a class='tabButton' id="editedTab">Edited</a>
            </li>
        {{/if}}
        {{#if tabIs "starredTab"}}
            <li class="active">
                <a class='tabButton' id="starredTab">Starred</a>
            </li>
        {{/if}}
    </ul>
    <div id="usernav" class="tab-content">   
        {{#if tabIs "editedTab"}}
            <div id="edited" class="tab-pane active">
                <ul>
                    {{#each edited}}
                        <li><a class="left-nav" href="{{entryLink this}}">{{title}}</a></li>
                    {{/each}}
                </ul>
            </div> 
        {{/if}}
        {{#if tabIs "starredTab"}}
        <div id="starred" class="tab-pane active" >
            <ul>
                {{#each starred}}
                <li><a class="left-nav" href="{{entryLink this}}">{{title}}</a></li>
                {{/each}}
            </ul>
        </div>
        {{/if}}
    </div>

ヘルパー タブが #if 内にネストされています (流星のドキュメントによると、ハンドルバーに拡張機能が追加されているため、これは許容されます)。

次に、coffeescript に次のように記述します。

Template.leftNav.tabIs = ->
    Session.get('tabIs')

Template.leftNav.events =
    'click .tabButton' : (evt) ->
         $el = $(evt.target)
         Session.set( 'tabIs' , $el.attr('id'))

Meteor.startup にセッション変数をシードします。

Meteor.startup ->
    Session.set('tabIs', 'editedTab')

問題は、両方のタブが常にレンダリングされることであり、その理由はわかりません

4

1 に答える 1