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的组件，其中包含上述HTML中的第一个和第二个（使用colspan =＆＃34; 3＆＃34;）<tr>个元素。问题是，当我将它作为一个组件插入时，Ember将这两行包装在一个<div>中，这会导致行显得很笨拙。它没有占据桌子和桌头的宽度。我该如何解决这个问题？

Answer 1

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

以下示例代码来自我的 data-grid-row 组件：

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

  ...
});

如果您不覆盖此tagName，则会为您创建 div 。

查看the resource from Ember Guide

为每个表行创建Ember.js组件会导致宽度发生变化吗？

1 个答案: