1

在我的 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 的组件，其中包含<tr>上述 HTML 中的整个第一个和第二个（带有 colspan="3"）元素。问题是，当我将它作为组件插入时，Ember 将两行包装在 a 中<div>，这会导致这些行尴尬地显示出来。它不占用桌子的宽度和桌头。我怎样才能解决这个问题？

4

1 回答 1

3

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

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

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

  ...
});

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

查看Ember Guide 中的资源

于 2016-05-20T06:11:16.370 回答