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> 

Answer 2

在您的模板中，使用如下所示的未綁定Handlebars助手：{{{value}}}。儘管你會失去價值綁定。