Redirect components rendered location in ember

I want to change the location that content is rendered out. Now i know i can do this with using the didInsertElement hook and one of the helpers the component class uses like replaceIn or createElement but this is in the js file and i'd rather use templates if i can. I have a structure like this

{{#tab.tab-panel}}
        {{#tab.tab-header}}
            <i class="ico-help"></i>Tab2
        {{/tab.tab-header}}
        {{#tab.tab-header}}
            <i class="ico-help"></i>Tab2
        {{/tab.tab-header}}
        {{#tab.tab-pane}}
            Tab
        {{/tab.tab-pane}}
        {{#tab.tab-pane}}
            TAB2
        {{/tab.tab-pane}}
    {{/tab.tab-panel}}

I would like to take the tab-headers and loop through them in the tab-panel and output it like this.

<div class="tab-panel">
     <ul class="tab-header">
         <li><i class="ico-help"></i>Tab2</li>
         <li><i class="ico-help"></i>Tab3</li>
     </ul>
     <div class="tab-body">
         <div class="tab-component1">
            Tab
         </div>
         <div class="tab-component2">
            TAB2
         </div>
     </div>

I was thinking something like this would be perfect

{{#each tab in tab-headers}}
    <li>{{tab render}}</li>
{{/each}}

Is such a thing even possible or do i need to create two more components to wrap the header and the panes?