Ember组件没有包装在.ember-view类中？

Question

我正在尝试为旋转木马创建一个组件,但如果我使用Ember组件迭代HTML,它会包装每个幻灯片,这会打破html的结构.

它应该是:

<div class="banner">
    <ul>
        <li>This is a slide.</li>
        <li>This is another slide.</li>
        <li>This is a final slide.</li>
    </ul>
</div>

但它变成了:

<div class="banner">
    <ul>
        <div class="ember-view">
            <li>This is a slide.</li>
        </div>
        <div class="ember-view"> 
            <li>This is another slide.</li>
        </div>
        <div class='ember-view'>
            <li>This is a final slide.</li>
        </div>
    </ul>
</div>

你是如何解决这个问题的？

组件是否是错误的用途？

Answer 1

修改组件的tagName:

App.CarouselSlideComponent = Ember.Component.extend({
  tagName: 'li'
});

用法:

<ul>
  {{#each slides}}
    {{#carousel-slide}}
      {{content}}
    {{/carousel-slide}}
  {{/each}}
</ul>

或者内联传递:

<ul>
  {{#each slides}}
    {{#carousel-slide tagName="li"}}
      {{content}}
    {{/carousel-slide}}
  {{/each}}
</ul>