Ember components without wrapping in .ember-view class?

Question

I am trying to create a component for a carousel but if I iterate through the HTML with Ember components it wraps each slide with which breaks the structure of the html.

It should be:

<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>

But it turns into:

<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>

How do you solve this?

Are components the wrong thing to use for this?

Answer 1

Modify the tagName of the component:

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

Usage:

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

---

Or pass it inline:

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