javascript - 为每个表行创建一个 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>

如您所见，我现在有一个名为 table-row 的组件，它包含完整的第一行和第二行(colspan="3")<tr>上述 HTML 中的元素。问题是，当我将它作为组件插入时，Ember 将两行包装在 <div> 中。这会导致行显得笨拙。不占 table 宽和 table 头。我该如何解决这个问题？

Answer 1

在您的组件定义中，覆盖 tagName 属性。

以下示例代码来 self 的data-grid-row 组件:

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

  ...
});

如果您不覆盖此 tagName，将为您创建一个 div。

看看the resource from Ember Guide