爲每個表格行創建一個Ember.js組件導致寬度改變？

Question

在我Ember.js的應用程序，我有一個Hanldebars模板像這裏面一個標準的HTML表：

<table> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Email Address</th> 
      <th>Number</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>John Doe</td> 
      <td>john.d@gmail.com</td> 
      <td>111-111-1111</td> 
     </tr> 
     <tr colspan="3"> 
      <td><!-- Loads of other markup --></td> 
     </tr> 
    </tbody> 
</table> 

這工作得很好，但我必須把每個錶行到一個組件，以添加一些邏輯等等。代替直接添加的行中，我現在有：

<table> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Email Address</th> 
      <th>Number</th> 
     </tr> 
    </thead> 
    <tbody> 
     {{#each people as |person|}} 
      {{table-row person=person}} 
     {{/each}} 
    </tbody> 
</table> 

正如你可以看到，我現在有一個組件稱爲錶行，其具有在整個第一和第二（和合並單元格=「3」）<tr>來自上述HTML的元素。問題是，當我將它作爲一個組件插入時，Ember將這兩行包裝在一個<div>中，這導致行顯得笨拙。它不佔用桌子和桌子的寬度。我怎樣才能解決這個問題？

Answer 1

在您的組件定義中，覆蓋tagName屬性。

下面的示例代碼是從我數據網格行組件：

export default Ember.Component.extend({ 
    tagName:'', 

    ... 
}); 

如果不重寫此tagName，一個DIV將會爲您創建。

看一看the resource from Ember Guide