How can I introduce javascript templating such as Mustashe or Handlebars when using jQuery and Bootstrap?

Question

I'm working on a small one page app written using jQuery and Bootstrap to display data from ajax requests into tables in the 'content' of each tab.

Currently the tabbed structure on the page is hard coded in html

Tabs:

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Tab One</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab Two</a></li>
        etc
    </ul>

Content:

<div class="tab-content">
    <div class="tab-pane active" id="tab1">
        table view of data...
    </div>
</div>

I'd like to introduce a templating library such as Mustashe or Handlebars.js, but I'm not sure how to tackle it.

I think I need the templates to iterate over defined 'tabs', providing a slightly different 'content' view for each tab... which can then be populated by my data... How should I best go about this, any help would be gratefully received?

Answer 1

If I understood your question right, you are looking for N number of tabs to show N number of tab-contents when you have N number of rows in your resultset.

If yes, then you will need to loop the tabs and the tab-contents through an "each" iteration like below

<div class="tabbable">
<ul class="nav nav-tabs">
    {{#each ID}}
       <li><a href="#tab"{{ID}} data-toggle="tab">Tab {{ID}}</a></li>
    {{/each}}
    etc
</ul>

And wherever you have the tab-contents, you do the following

<div class="tab-content">
{{#each ID}}
    <div class="tab-pane" id="tab"{{ID}}>
        FieldName1: FieldValue1
        FieldName2: FieldValue2
    </div>
{{/each}}
</div>

All these assuming that the ID contains some autonumber such as 1, 2, 3 ... as the number of records increase.