Javascript 余烬视图包装器正在破坏我的表

我是新的余烬和一个简单的测试应用程序的工作。我试图从json数据动态呈现表的行。这项任务相对简单。但是，每一行都是一个组件，ember使用类ember view将元素包装在一个div中。我相信这会妨碍我的表正确渲染。在余烬中，这通常是如何处理的

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

//contact-listing.hbs
{{contact.employee_id}
{{contact.firstName}
{{contact.lastName}
{{contact.email}
{{联系电话}
{{联系部门}
//联系人.hbs
员工
员工ID
名字
姓
电子邮件
电话
部门
{{{#每个模型作为| | |}
{{联系人列表联系人=_联系人}}
{{/每个}}

现在我得到的是标记——在浏览器中，所有td数据都以内联方式呈现，没有表格格式。我认为这是由于插入了余烬包装器div

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

john@company.com
416-555-1111
金融

这就是渲染出来的视觉效果：

使用：

tagName: '',

---

在您的组件定义中。

我还使该行可单击，如：{{{#链接到“联系人视图”联系人标记名=“tr”}，如何向整行添加链接？对于任何未来的读者，我的组件代码现在看起来像：从“Ember”导入Ember；导出默认的Ember.Component.extend（{tagName:“tr”}）；好的，但是如果我把链接到我的模板中，我会在另一个tr中得到一个tr。我知道，在组件中创建一个“单击”钩子，然后使用标记名“tr”，并将链接完全删除。您还需要注入“-routing”服务来访问transitionTo