创建ember组件

Question

我在这里使用包含标签视图和不同标签窗格的emberjs的可嵌入组件的代码如下所示。它的选项卡窗格有一个不同的把手模板：

     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>");
        };

模板一个接一个地附加到容器中。这是一个更好的方法吗？像 -

这样的东西

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

代码是可嵌入的，所以最小的没有。 html文件中需要模板，这就是我将其包装在javascript中的原因。

ember有更好的方法吗？