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}}
Related
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?
I have 2 routes - sessions and session (because I want to present them in 2 different pages)
App.Router.map(function () {
this.route("sessions", { path: "/sessions" });
this.route("session", { path: "/sessions/:session_id" });
}
When I go to: #/sessions - I get a nice table that I drew, and when I click the link I made
in the handlebar view:
{{#each model}}
<tr>
<td>{{#link-to 'session' this}}{{this.id}}{{/link-to}}</td>
</tr>
It works - the separate handlebars of the session is drawn
When I go directly to #/sessions/4 I'm getting an error:
Assertion Failed: You may not pass "undefined" as id to the store's find method
The routes:
App.SessionsRoute = Ember.Route.extend({
model: function() {
return this.store.find('session');
}
});
App.SessionRoute = Ember.Route.extend({
model: function(params) {
return this.get('store').find('session', params.session_id);
}
});
For the dynamic segments to work, you need to use this.resource when declaring your routes:
App.Router.map(function () {
this.route("sessions", { path: "/sessions" });
this.resource("session", { path: "/sessions/:session_id" });
}
My Ember router looks similar to below.
App.Router.map(function() {
this.resource('projects', function () {
this.resource('listings', { path: '/:project_id/listings' }, function() {
this.route('listing', { path: '/:listing_id' });
});
});
});
I have 2 templates (projects, listings). The projects template has a {{#link-to}} helper that adds an anchor to the listings resource. The projects template is working fine. The {{#link-to}} helper also seems to generate the url correctly (~ /projects/2/listings).
Now the listings are rendered correctly but they are rendered inside the projects template. I assume this is because the resources are nested. So I removed the nesting and made both projects and listings as their own resources.
App.Router.map(function() {
this.resource('projects');
this.resource('listings', { path: 'projects/:project_id/listings' }, function() {
this.route('listing', { path: '/:listing_id' });
});
});
The problem is when the route transitions to listings, the listings template is not rendered. It's just blank. The below fiddle demonstrates the issue.
Fiddle: http://jsfiddle.net/harshavarma/aqHnt/3/
To do what you want, structure your routes in the same way you started with
App.Router.map(function() {
this.resource('projects', function () {
this.resource('listings', { path: '/:project_id/listings' }, function() {
this.route('listing', { path: '/:listing_id' });
});
});
});
Then, the projects template should only be {{outlet}}. If there is content that you want to render only when you navigate to /projects, but not when you navigate deeper, put that content in a projects/index template (or whatever that template is called based on your naming conventions) and setup any necessary router and controller stuff on ProjectsIndexRoute and ProjectsIndexController. Now your listings template will only be nested inside projects which is just an outlet, and you won't see any of the projects/index content when viewing listings.
http://emberjs.com/guides/routing/defining-your-routes/#toc_resources
I'm having an issue making a nested route available in Ember.js
App.Router.map(function() {
this.resource('home', { path: '/' });
this.resource('form', { path: '/forms/:form_id' }, function() {
this.route('newRecord');
});
I have the parent route...
App.FormRoute = Ember.Route.extend({....
Which is working.
Next I have...
App.FormNewRecordRoute = Ember.Route.extend({
afterModel: function() {
this.set('newRecord', this.modelFor('form');
}
});
Normally I get the URL with something like localhost/forms/9087
With the child route I'm getting localhost/undefined/newRecord
I'm guessing that 'localhost/undefined/newRecord' is coming from something like {{#link-to 'newRecord'}}. It should probably be {{#link-to 'form.newRecord'}}.
I have 2 nested resources, Post and Comment in an Ember router. I want this to reflect the url:
/posts/1/comments/1
Going to this page should,
Render the Post for id = 1 using post/index template.
Render the Comment for the Post with Comment id = 1 using the comment/index template
Here is the example on jsbin.
My routing code is,
App.Router.map(function() {
this.resource('home', { path: '/' });
this.resource('posts', { path: '/posts' }, function() {
this.resource('post', { path: ':post_id' }, function() {
this.resource('comments', { path: 'comments' }, function() {
this.resource('comment', { path: ':comment_id' }, function() {
// need explicit index
});
});
});
});
});
The templates and the rest of the Ember code is pretty much stock. Only thing different is I am redirecting to /posts/1/comments/1 from the home route.
I can't get the post or the comment to render inside the /index template. Both the Post body and Comment Body are blank.
It works if I embed the contents of the index template inside the main posts or comments template. But this isn't what I need, the comment needs to be nested inside the Post.
Any ideas how to get this working? Thanks.
PS: I am using ember-latest and ember-data latest.
Usually this sort of problem comes down to naming conventions. Probably ember is looking for controllers and templates that you do not expect. Try adding the following to your application then watch console, it will help you see what routes/controllers/templates are being used.
App = Ember.Application.create({
LOG_ACTIVE_GENERATION: true,
LOG_TRANSITIONS: true,
LOG_VIEW_LOOKUPS: true
});
Also, those routes are probably more complicated than they need to be. Typically it does not make sense for 'post' route to be nested within a 'posts' resource. Same goes for comment/comments. Try this instead:
App.Router.map(function() {
this.route('posts');
this.resource('post', { path: '/posts/:post_id' }, function() {
this.route('comments')
this.resource('comment', { path: '/comments/:comment_id' });
});
});