.ember-view 클래스로 래핑하지 않은 Ember 구성 요소?

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을 수정

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

---

를 또는 인라인 전달할 :

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

Answer 2

서식 파일에서 언 바운드 Handlebars 도우미를 사용하십시오 (예 : {{{value}}}). 당신은 가치 바인딩을 잃을 것이다.

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

사용법 :