Создание компонента Ember.js для каждой строки таблицы приводит к изменению ширины?

Question

В моем приложении ember.js, у меня есть стандартный HTML-таблицы в шаблоне Hanldebars, как это:

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

Как можно видеть, у меня теперь есть компонент под названием таблицы-строка, которая имеет все первые и вторые (с COLSPAN = «3») <tr> элементов из вышеприведенного HTML. Проблема в том, что когда я вставляю его в качестве компонента, Ember обертывает две строки в <div>, и это приводит к неустойчивости появления строк. Он не занимает ширину стола и стола. Как я могу это исправить?

Answer 1

В определении вашего компонента переопределить tagName.

Следующий пример кода из моего данных сетки строки компонента:

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

    ... 
}); 

Если вы не переопределить этот tagName, ДИВ будет создан для вас.

Посмотрите на the resource from Ember Guide