Ember.js Bootstrap Tab Conditional

{{#each columns as |element|}}
  <div id={{element.field}}>
    <label class="control-label">{{element.title}}</label>
    {{element.description.long}}
    {{#if (compareHelper element.type "==" "text")}}
      {{bs-form-element controlType="text" name=element.field}}
    {{else if (compareHelper element.type "==" "password")}}
      {{bs-form-element controlType="password" name=element.field}}
    {{else if (compareHelper element.type "==" "boolean")}}
      {{bs-form-element controlType="checkbox" name=element.field}}
    {{else if (compareHelper element.type "==" "date")}}
      {{bs-form-element controlType="text" name=element.field class="datepicker"}}
    {{else if (compareHelper element.type "==" "dropdown")}}
      {{bs-form-element controlType="select" name=element.field choiceLabelProperty="text" choiceValueProperty="key" choices=element.options}}
    {{/if}}
  </div>
{{/each}}

That is the code I have now. It iterates over an array and for each element, it displays the appropriate field type. I want to be able to group the field into tabs (using Bootstrap Tab component). So if tabs is undefined, just do what is above. Otherwise, tabs contains the titles of the tab navigation bar. Assume if tabs is defined, element.tab will contain which tab that particular element should be in. How can I do this without repeating the big if/else if loop to create the fields? There are only a few now, but there could be many more later.

I was thinking I could just use jQuery to move the field into the correct tab after I render them but from what I understand that isn't a good thing to do with Ember. Thanks.

Just to clarify, this is how a Bootstrap Tab Component Works:

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>
</div>