2

I am new to ember and working on a simple test app. I am trying to render the rows of a table dynamically from json data. The task is relatively simple. However each row is a component and ember wraps the element in a div with class ember-view. I believe this is preventing my table from rendering properly. How would this typically be handled in 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>

Now here is the markup I am getting back - in the browser all the td data is rendered as inline with no table formatting. I think this is due to the insertion of ember wrapper 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>

here is what the table markup looks like

This is what gets rendered out visually:

enter image description here

Scott Wright
  • 186
  • 1
  • 11

1 Answers1

5

Use:

tagName: '',

in your component definition.

LukeP
  • 10,422
  • 6
  • 29
  • 48
  • I was also making the row clickable like: {{#link-to 'contact-view' contact tagName="tr"}}, how can I add a linkTo to the entire row? – Scott Wright Apr 07 '16 at 21:57
  • 1
    Also for any future readers my component code now looks like: import Ember from 'ember'; export default Ember.Component.extend({ tagName: "tr" }); – Scott Wright Apr 07 '16 at 21:59
  • Ok but if I place the linkTo in my template I get a tr inside of another tr. – Scott Wright Apr 07 '16 at 22:17
  • I see, create a 'click' hook in the component then, use tagName: 'tr', and drop the link-to completely – LukeP Apr 07 '16 at 22:26
  • You will need to also inject the '-routing' service to get access to transitionTo – LukeP Apr 07 '16 at 22:28
  • @ScottWright Take a look at this: http://discuss.emberjs.com/t/is-injecting-using-the-router-in-a-component-a-terrible-idea/8188/3 and this: https://guides.emberjs.com/v2.4.0/components/handling-events/ – LukeP Apr 07 '16 at 22:32