ember-view wrapper 破坏了我的 table

Question

我是 ember 的新手，正在开发一个简单的测试应用程序。我正在尝试根据 json 数据动态呈现 table 的行。任务相对简单。但是，每一行都是一个组件，ember 将元素包装在 div 和 class ember 视图中。我相信这会阻止我的 table 正确呈现。在 ember 中通常如何处理？

//contact-listing.hbs
<tr>
   <th scope="row">{{contact.employee_id}}</th>
   <td>{{contact.firstName}}</td>
   <td>{{contact.lastName}}</td>
   <td>{{contact.email}}</td>
   <td>{{contact.telephone}}</td>
   <td>{{contact.department}}</td>
</tr>

//contacts.hbs
<h1>Employees</h1>
<table class="table">
  <thead>
    <tr>
      <th>Employee ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Telephone</th>
      <th>Department</th>
    </tr>
  </thead>
  <tbody>
    {{#each model as |_contact|}}
      {{contact-listing contact=_contact}}
    {{/each}}
  </tbody>
</table>

现在这是我要返回的标记 - 在浏览器中，所有 td 数据都呈现为内联，没有 table 格式。我认为这是由于插入了 ember 包装器 divs.

<div id="ember438" class="ember-view">
    <tr>
      <th scope="row"><!----></th>
      <td><!----></td>
      <td><!----></td>
      <td>john@company.com</td>
      <td>416-555-1111</td>
      <td>finance</td>
    </tr>
</div>

这是视觉呈现的内容：

Answer 1

使用：

tagName: '',

在您的组件定义中。

ember-view wrapper 破坏了我的 table

ember-view wrapper is breaking my table

html

javascript

css

handlebars.js

ember.js