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?
Related
I'm new to Ember and trying to learn by following tutorials and documentation I can find on the Net.
I'm trying to wrap my head around custom Ember views and when to use them.
I have test case where I list a number of products in a table. Once you click on a specific product, I would like for a hidden row or div to display right below the currently selected product and potentially make an Ajax call to a web service to retrieve more information about the product. Inside this open div or row I might need to edit the fields etc. Should I be using an Ember view for this? When do you trigger click events for the row etc? In which controller would you handle all of the necessary events and extra product information being returned from the service etc.
I've created a JS fiddle with the basic setup, but none of the click events. Has anyone done something similar that I could have a look at, or would be able to assist?
http://jsfiddle.net/jc79aoap/1/
This is just the basic table structure that lists the products, showing the rows that I would like to be clickable:
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{{#each}}
<tr>
<td>{{id}}</td>
<td>{{title}}</td>
<td>{{description}}</td>
</tr>
{{/each}}
</tbody>
</table>
Thanks
Conception
This is a structure problem that I have faced some time ago. I have developed following approach. Let's start with defining some necessary controllers
App.ProductsController = Ember.ArrayController.extend({
itemController: 'product'
});
App.ProductController = Ember.ObjectController.extend({
displayDetails: false,
actions: {
toggleDetails: function() {
this.toggleProperty('displayDetails');
return;
}
}
});
and corresponding view
{{#each}}
<tr {{action 'toggleDetails'}}>
<td>{{id}}</td>
<td>{{title}}</td>
<td>{{description}}</td>
</tr>
{{#if displayDetails}}
<tr>
<td colspan="3">details here to {{id}}</td>
</tr>
{{/if}}
{{/each}}
You can of course move logic inside condition to another controller
{{#if displayDetails}}
{{render 'productDetails'}}
{{/if}}
You should get desired effect as you can see there
Pros and cons
You are won't have the state of URL changed after click and you won't get ProductRoute.
You can use still load data asynchronously by using ember data with async relationship between models. I am quite not sure whether is it good to do things this way in MVC framework. With time it's going to be a huge mess, believe me.
Conclusion
I don't know whether is there better approach at the moment but you should think a little bit about your UX schema. Maybe it would be better to render sub results in the sidebar or redirect user to different page?
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 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
at the moment im really frustrated. I ll try to get table filled with some data of my database. Therefore i have a controller and a View.
App.TableController.extend({
content: [],
contentBinding:'App.incidient.content'
})
App.TableView = Ember.CollectionView.extend({
tagName: 'tbody',
itemViewClass: Ember.View.extend({
templateName: 'table'
})
My html code looks like this:
<div class="row-fluid">
<table class="table table-striped">
<thead>
<tr>
<th>
Title
</th>
<th>
Customer
</th>
<th>
Machine
</th>
<th>
Priortity
</th>
<th>
Status
</th>
</tr>
<thead>
{{view App.TableView}}
</table>
</div>
</script>
<script type="text/x-handlebars" data-template-name="table">
{{#each item in content}}
<td>
{{view item.incidient.title}}
</td>
<td>
{{view item.incidient.customer}}
</td>
<td>
{{view item.incidient.machine}}
</td>
<td>
{{view item.incidient.priority}}
</td>
<td>
{{view item.incidient.status}}
</td>
{{/each}}
</script>
Im not frustrated because of my the code that is not working. It is more about the fact that:
i dont find any good guide or post where i can see how to debug my Application. The Debugging tool from Chrome doesnt help at all, because i can't figure out how to get access to the content of my TableController or better where i can find it.
i dont understand where the App is initializing all of my Controllers and how i can access them. With the old router: it was like 'App.router.myController' but this is not working anymore.
i dont know how to access datas from a different controller. I tried to bind the Table.Controller.content to the 'App.incidient.content' and Ember didnt even throw an exception or something
I hope you can help. I dont think that these question are really difficult to answer but for a noobie like me they are quite fundamental.
Greeting and thank you
Alex
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?