Creating ember components

I have the following code here :

     App.obj = Ember.Object.create({
            "items": data['item-list']
        });
        var templates = [{
            name: 'list',
            list: '
              <div class="tab-pane">
                <ul class="item-list">
                  {{#with App.obj}}
                  {{#each item in items}}
                  <li class="c-item">
                    <a href="">
                      <div class="cc-item-a">{{item.bar}}</div>
                      <div class="cc-item-b">{{item.title}}</div>
                      <div class="cc-item-c">{{item.foo}}</div>
                    </a>
                  </li>
                  {{/each}}
                  {{/with}}
                </ul>
              </div>'
        }, {
            name: 'cal',
            cal: ' <div class="tab-pane">calendar</div>'
        }, {
            name: 'add',
            add: '<div class="tab-pane">add events</div>'
        }, {
            name: 'dashboard',
            dashboard: '{{outlet tab}}\
        <ul class="tabrow">
          <li><a href="#" data-tab="list" {{action selectTab "tabA"}}>list</a></li>
          <li><a href="#" data-tab="cal" {{action selectTab "tabB"}}>cal</a></li>
          <li><a href="#" data-tab="add" {{action selectTab "tabC"}}>add</a></li>
        </ul>'
        }];
        for (var i = 0; i < templates.length; i++) {
            $('.container').append('<script type="text/x-handlebars" data-template-name="' + templates[i].n

ame + '">' + templates[i][templates[i].name] + "</script>");
        };

The templates are appended one after another to the container. Is there a better approach to it the ember-way ? Something like -

<script type="text/x-handlebars">
    {{my-component}}{{/my-component}}
</script>

The code is meant to be embeddable, so minimal no. of templates are required in the html file, that's why I wrapped it in the javascript.

Does ember has a better approach to it ?