in my router i have
this.route('users', { path: '/users' }, function(){
this.route('show', { path: '/:user_id' }, function(){
this.route('history',{ path: '/history' });
});});
in my template i want to link to the users/1/history url
but {{#link-to "users.show.history" user}}History{{/link-to}}
is not working.
So what is the correct way to write this link to?
Related
I'm using Ember POD syntax to organize my Ember application.
Is it possible to remove the pod directory from appearing in the browser URL? If so, how?
See picture.
This is my current router.js file
Router.map(function() {
this.route('main', function() {
this.route('about');
this.route('focus', function() {
this.route('show');
});
this.route('projects', function() {
this.route('show');
});
this.route('articles', function() {
this.route('show', {path: '/:id'});
});
this.route('contact');
});
});
Thanks.
Your main route can have a path of ''.
this.route('main', { path: '' }, function() {
this.route('about');
// etc...
}
Using the example route defined below how can a link be defined to /post/123/comments?
Router.map(function() {
this.route('post', { path: '/post/:post_id' }, function() {
this.route('edit');
this.route('comments', { resetNamespace: true }, function() {
this.route('new');
});
});
});
Since resetNamespace: true is set on comments, the route post.comments does not exist. Otherwise the following would work.
{{#link-to "post.comments" "123"}}Link{{/link-to}}
You have to link directly to comments:
{{#link-to "comments" "123"}}Link{{/link-to}}
It will transition to /post/123/comments after you click it. See working demo.
I'm building an ember.js app which has a model called "Programme".
A user can drill down to a programme by going:
Genre > Subgenre > Programme or Folder > List > Programme
Here's my router:
this.resource('mylists', { path: '/' }, function() {
this.resource('folder', { path: '/folder/:folder_id' }, function() {
this.resource('list', { path: '/list/:list_id' }, function() {
this.resource('programme', { path: '/programme/:programme_id' });
});
});
});
this.resource('catalogue', function() {
this.resource('genre', { path: '/genre/:genre_id' }, function() {
this.resource('subgenre', { path: '/subgenre/:subgenre_id' }, function() {
this.resource('programme', { path: '/programme/:programme_id' });
});
});
});
The UI needs to be deeply nested (the genre view renders in the outlet of the catalogue template, the subgenre in the outlet of the genre template... and so forth).
The problem I have is as both generated routes are called ProgrammeRoute when I linkTo the programme route inside the list template, it actually goes to the programme route nested in the subgenre route.
What should I be doing here?
To work around it I've named one route ListProgrammeRoute and SubgenreProgrammeRoute but that leads to some duplication.
Have you tried using the link-to helper with multiple models?
{{link-to 'mylists.folder.list.programme' aFolder aList aProgramme}}
I've got a problem getting the linkTo Handlebar helper to work
I've got this route setup:
this.resource("contact", function(){
this.route('new');
this.route('show', { path: "/:contactid" });
this.route('edit', { path: "edit/:contactid" });
}
in my template I have the following code:
{{#each entry in controller.entries}}
{#linkTo "contact.show" entry href="true" }}test {{firstname}} {{lastname}}{{/linkTo}}
{{/each}}
The resulting link though is /contact/show/undefined
What am I doing wrong?
Sidenote: I'm not using Ember.Data and the models.
Ember expects that parameters follow the convention modelname_id, so the route should be changed to:
this.resource("contact", function(){
this.route('new');
this.route('show', { path: "/:contact_id" });
this.route('edit', { path: "edit/:contact_id" });
}
This should work, assuming that entry.get("id") is defined.
See http://emberjs.com/guides/routing/specifying-a-routes-model/ for detail.
Implement serialize in the router to override the default behavior of id. For example I have a route that looks like:
this.route( 'date', { path: '/:begin/:end'} );
and the route will look like
Em.Route.extend( {
serialize: function( model, params ) {
return { begin: model.begin.valueOf(), end: model.end.valueOf() };
}
} );
In ember.js pre 4 I'm trying to achieve a routing which responds to the following routes (among others):
/contact/[id]
/contact/edit
/contact/new
/contact/list
/contact/list/my
/contact/list/team
/contact/list/groups
The first routes (up to list) I can manage:
The variants of list (my/team/groups) is where I'm struggling. I just get a: "No route machted the URL '/contact/list/my' error when calling it.
I've tried multiple variations on how to achieve this kind of nesting. This is my current attempt:
App.Router.map(function()
{
this.route("index");
this.resource("contact", function(){
this.route('new');
this.route('show', { path: "/:contact_id" });
this.route('edit', { path: "edit/:contact_id" });
});
this.resource("contact.list", function(){
this.route("index");
this.route("my");
});
});
Looking at the App.Router.router.recognizer.names: I see the following output:
contact.edit: Object
contact.index: Object
contact.list.index: Object
contact.list.my: Object
contact.new: Object
contact.show: Object
index: Object
__proto__: Object
Any ideas?
This seems to work for me:
App.Router.map(function()
{
this.route("index");
this.resource("contact", function(){
this.route('new');
this.route('show', { path: "/:contact_id" });
this.route('edit', { path: "edit/:contact_id" });
this.resource("contact.list", { path: "list/" },function(){
this.route("index");
this.route("my");
});
});
});