I have a list of items and I want it to be displayed in a table. In handlebars docs, it says that I can access the #index to display the index of each item. However, in ember.js, it seems to have an error with #index.
<table class="table table-condensed table-striped">
<tbody>
{{#each}}
<tr>
<td>{{#index}}</td>
<td>{{name}}</td>
</tr>
{{/each}}
</tbody>
What is the workaround for this?
you can use {{_view.contentIndex}} instead. Preview: http://emberjs.jsbin.com/panoseya/1/edit
Related
There has been several versions of this question, but I've found a specific scenario I can't get my head around. I have this template on a parent element:
<tbody>
<tr is="tree-item" v-for="item in children" :item="item"></tr>
</tbody>
So far so good. The child element is:
<tr v-on:click="toggle" class="{{ classes }}">
<td class="name">
{{ item.tree_item_heading }}
</td>
</tr>
<tr v-show="isLoaded" is="tree-item" v-for="item in grandChildren" :item="item"></tr>
It's a recursive form line, so if the first tree-item has children, they will render as tree-item too. Although it shows up fine, it is rendered as a Fragment Instance, hence the v-show property gets ignored.
Any idea on how to solve this?
Cheers
You could try using multiple tbody tags for your parent loop:
<tbody v-for='item in children'>
<tr is="tree-item" :item="item"></tr>
<tr v-show="isLoaded" is="tree-item" v-for="gItem in item.children" :item="gItem"></tr>
</tbody>
I currently have a component a couple of components. One is a component to display all my table view data, and inside of that component, is another to display the search fields. They look like so:
{{#table-display model=model}}
<table class="data-table">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>Email Address</th>
</tr>
</thead>
<tbody>
{{#each filteredModel as |contact| }}
{{#link-to 'contacts.edit' contact tagName="tr"}}
<td>{{ current-status model=contact }}</td>
<td>{{ contact.name }}</td>
<td><em>{{ contact.name }}</em></td>
<td><em>{{ contact.email }}</em></td>
{{/link-to}}
{{/each}}
</tbody>
</table>
{{/table-display}}
Then inside of the table-display component, I have my search filter input.
{{input value=filterString placeholder="Search Contacts" }}
The table filtering works if I put the table into the table-display component, but not if it's just within the component. What am I doing wrong here?
There is a few ways to get the fitleredModel data to flow out of the component, the idiomatic way is to use HTMLBars blocked params.
Inside table-display's template:
...
{{input value=filterString placeholder="Search Contacts" }}
...
{{yield filteredModel}}
And then in your main template:
{{#table-display model=model as |filteredModel|}}
...
{{#each filteredModel as |contact|}}
...
{{/each}}
{{/table-display}}
I have the following index template:
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>name</th>
</tr>
</thead>
<tbody>
{{#each agent in model}}
<tr>
<td>{{#link-to "agents.show" agent}}{{agent.name}}{{/link-to}}</td>
</tr>
{{/each}}
</tbody>
</table>
I have defined a link-to to a show route, but this is not working: it is creating the following link:
http://localhost:9001/#/nodes/agents/undefined/show
With an undefined dynamic segment. If instead I directly supply the .id of the agent:
<td>{{#link-to "agents.show" agent.id}}{{agent.name}}{{/link-to}}</td>
The link is created fine. But I do not want to do this because that means a round-trip to the server, while I already have the model available in the index controller. Besides, the link-to helper has always worked fine with a supplied model (I have refactored my app quite a bit, and I am unable to find the source of this problem)
Why is link-to able to use the object id for the dynamic segment, but it is not able to pass the full object to the linked route? What can I do to further debug this issue?
I have really enormous table to handle in Ember.js. At this moment I am using to this job single controller, but it breaks single responsibility principle.
<table>
<thead>
<tr>
<th>First column in first group</th>
<th>Second column in first group</th>
<th>First column in second group</th>
<th>Second column in second group</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{controller.someAction}}</td>
<td>{{controller.otherAction}}</td>
<td>{{controller.someAction2}}</td>
<td>{{controller.otherAction2}}</td>
</tr>
</tbody>
</table>
Instead I would like to group couples of related actions in one controller.
<table>
<thead>
<tr>
<th>First column in first group</th>
<th>Second column in first group</th>
<th>First column in second group</th>
<th>Second column in second group</th>
</tr>
</thead>
<tbody>
<tr>
{{render 'firstGroup' this}}
{{render 'secondGroup' this}}
</tr>
</tbody>
</table>
However, it is not going to work. Ember will place firstGroup in some kind of tag (for instance div), which can't be located directly beetwen <tr> and <td>. I can't use neither <tr>, nor <td> for rendering container.
It would be great if ember could render controller without container's tag. Is there any way to deal with that? Maybe there is special tag in HTML which won't breake my table layout and can be placed in that position? "Actions" in my controller are only calculating values based on model. Maybe Should I use something other than controller?
Yes and no.
You can define the tag to be used for a particular view, unfortunately having it host multiple columns using render would be difficult. So you'd likely need to break it down to individual TDs using render.
<tr>
{{render 'firstGroup' this}}
{{render 'secondGroup' this}}
{{render 'thirdGroup' this}}
{{render 'fourthGroup' this}}
</tr>
App.FirstGroupView = Em.View.extend({
tagName:'td'
});
http://emberjs.jsbin.com/jafanitu/1/edit
That being said, I'd probably break it down at the row level with render, then use partials at the column level
<tbody>
{{render 'row' this}}
</tbody>
<script type="text/x-handlebars" data-template-name="row">
{{partial 'first_group'}}
{{partial 'second_group'}}
{{partial 'third_group'}}
{{partial 'fourth_group'}}
</script>
<script type="text/x-handlebars" data-template-name="_first_group">
<td>
hello world
</td>
</script>
http://emberjs.jsbin.com/jafanitu/2/edit
And then create mixins for handling the logic of each group and add those mixins to your controller, to keep your controller clean. http://emberjs.com/api/classes/Ember.Mixin.html
You can pass parameters to the view being rendered by the {{render}} helper:
{{render "myView" someViewProperty="foo" anotherViewProperty=4}}
Therefore you can set the tagName of your views, so that you get the correct HTML structure:
<table>
<thead>
<tr>
<th>First column in first group</th>
<th>Second column in first group</th>
<th>First column in second group</th>
<th>Second column in second group</th>
</tr>
</thead>
<tbody>
<tr>
{{render 'firstGroup' this tagName="td"}}
{{render 'secondGroup' this tagName="td"}}
</tr>
</tbody>
</table>
I have the following handlebars template:
{{#each Lead.leads_controller}}
<tr>
<td>
<strong>{{???}}</strong>
</td>
<td class="plus expander"> </td>
<td>{{company}}</td>
<td>{{web}}/</td>
<td>{{phone_1}}</td>
<td>{{phone_2}}</td>
<td>{{fax}}</td>
</tr>
{{/each}}
I want to show a 1 based index for each row in a table. I know previously the collectionView had contentIndex exposed but this does not appear to be the case for the each helper.
I found this that seems to suggest that this is not available for the each helper. Is there any way of making this possible for the each helper?