2015-11-02 30 views
0

由於我對流星非常陌生,請耐心等待。我正在嘗試使用以下代碼在一個模板中動態創建兩個選項卡及其各自的內容。預期的數據確實顯示出來,但是在我的第一個標籤上(假設{{Name}}的值是「FirstTab」),我在levels集合中查看了{{Name}}的所有項目。但是,當我單擊其他選項卡時,即使返回到「FirstTab」選項卡,我也只能看到預期的{{Name}}值。很明顯,我在某處錯誤地迭代......但我不明白爲什麼它在第一個選項卡中單擊時有效。我應該如何執行這個?導航選項卡不按預期方式工作

<ul class="nav nav-tabs" role="tablist"> 
    {{#each indexedArray levels}} 
     {{#if _isFirstIndex }} 
      <li role="presentation" class="active"><a href="#{{removeSpaces Name}}" aria-controls="{{removeSpaces Name}}" role="tab" data-toggle="tab">{{Name}}</a></li> 
     {{ else }} 
      <li role="presentation" class=""><a href="#{{removeSpaces Name}}" aria-controls="{{removeSpaces Name}}" role="tab" data-toggle="tab">{{Name}}</a></li> 
     {{/if}} 
    {{/each}} 
</ul> 
<div class="tab-content"> 
    {{#each indexedArray levels}} 
    <div role="tabpanel" class="tab-pane active" id="{{removeSpaces Name}}"> 
     <h2>{{Name}}</h2> 
    </div> 
    {{/each}} 
</div> 
+0

更流行的方法是在表示狀態的模板級別創建一個反應變量(選定的選項卡)並使用它來確定要呈現哪個選項卡(通過將var設置爲所需的索引,例如),而不是預先創建所有的標籤內容。 – MasterAM

回答

0

意識到我可以只添加相同{{#if _isFirstIndex }}圍繞tabpanel div來使其正常工作。但是,我同意@MasterAM這絕對不是流星狀,我需要按照這個建議進行重構。

相關問題