To link to record you can use something like this in your route:
this.route('clients', function() {
this.route('all',function(){
this.route('view',{
path:'view/:client_id'
});
});
});
So if the user were to go to:
/clients/all/view/-KdFmDwwWAHDFjjaG6aA
They could view that client record.
Is it possible to link at a deeper level? For example:
/clients/all/view/-KdFmDwwWAHDFjjaG6aA/property/-KdFeTqqUIKLFqbaP9aB
?
That way you could be looking at a specific client record and then launch an overlay for example to show the specifics on a single property that client has for sale?
I'm not sure how to structure the router or the link-to to accomplish this?
I hope I understand your question correctly. Here is my answer,
Yes, it's possible to have a deeper level, I will change your route config a bit to :
this.route('clients', { path: '/clients' }, function(){
this.route('view', { path: '/:clients_id' }, function(){
this.route('property', { path: '/property/:property_id' });
});
});
So in this case, your link-to code in the HBS would be
{{#link-to 'clients.view.property' clientId}}
whatever
{{/link-to}}
and now file structure is :
clients/
|___index.hbs
|___view.hbs
|___view/
|___propery.hbs
Please remember that you need to also modify your route.js for each properly. I assumed you don't have any problems for that.
if you need more help please let me know.
Related
Simply, the web app needs to use the application.hbs template 99% of the time but for a single route, I would like to disable it and render only the route template.
Like 'Layout=null;' in asp.net
Thanks in advance.
The shortest answer is that you need to nest all the routes that share a layout under a common parent route, since you can't remove the application template. This can be done in a couple different ways, depending on the goal.
If they all share a URL segment, you can put then under a common parent:
Router.map(function() {
this.route('pretty-layout', function() {
this.route('page-1'); // http://localhost:4200/pretty-layout/page-1
this.route('page-2'); // http://localhost:4200/pretty-layout/page-2
});
});
You can override the top-level index route. You'll likely need to move the current application.index to application.index.index:
Router.map(function() {
this.route('index', { path: '/' }, function() {
this.route('page-1'); // http://localhost:4200/page-1
this.route('page-2'); // http://localhost:4200/page-2
});
});
I'm working out an idea in Ember that has some pretty deeply nested routes.
Lets say my route is simulator.scenario.alien-invasion.situation.in-the-woods.something-else.etc
Is the only way to get to that route, to:
{{$link-to 'simulator.scenario.alien-invasion.situation.in-the-woods.something-else.etc'}}
<span>Next</span>
{{/link-to}}
Or is there some way to know that I'm already "in the woods?" and then have the route relative in some way?
(I'm not really going to have a route this deep, but it brought up the question. : )
You could use resetNamespace.
Quoting the documentation: http://emberjs.com/api/classes/Ember.Router.html#method_map
resetNamespace: false by default; when nesting routes, ember will
combine the route names to form the fully-qualified route name, which
is used with {{link-to}} or manually transitioning to routes. Setting
resetNamespace: true will cause the route not to inherit from its
parent route's names. This is handy for resources which can be
accessed in multiple places as well as preventing extremely long route
names. Keep in mind that the actual URL path behavior is still
retained.
App.Router.map(function(){
this.route('simulator', function() {
this.route('scenario', function() {
this.route('alien-invasion', function() {
this.route('situation', function() {
this.route('in-the-woods', { resetNamespace: true } function() {
this.route('something-else');
});
});
});
});
});
});
You should then be able to use relative links like:
{{#link-to "in-the-woods.something-else"}}Link Name{{/link-to}}
Regardless of where you are.
This is a very helpful talk about route nesting:
http://alexspeller.com/embercamp-london-talk-routing/
I don't think there is. The documentation is comprehensive for this, and it makes no mention. Glancing through the link-to component code and following it back to the router doesn't indicate it either.
My Goal: emulate nested route, but render it into application outlet.
For example:
/videos - top route
/videos/video001 - nested route
/videos/video001/slide001 - not nested. It is on the same level as /videos.
How I am doing this:
I have following router:
App.Router.map(function () {
this.resource('videos', { path: '/videos' }, function () {
this.resource('video', { path: '/:video_id' });
});
this.resource('slide', { path: '/videos/:video_id/:slide_id' });
});
To make 'slide' route work as expected I am overriding 'serialize' method, and
return 'video_id' and 'slide_id'
And at this point everything seems to be ok. At least page loads as expected.
What is the issue?
When I navigate to "/videos/video001" from "/videos/video001/slide001" via "link-to' helper,
I see following error: "Error while processing route: video".
And nothing more. I can't understand what kind of error happens and
why ember can't process route correctly. However I see that URL has been changed to "/videos/video001".
Any suggestions?
How to debug this situation or at least get any useful error message?
UPDATE
This article describe exact current situation and gives some solutions: http://hashrocket.com/blog/posts/ember-routing-the-when-and-why-of-nesting
Ok. I wasn't able to figure out what is the issue, and seems to be nobody able to help with that even on ember irc channel. So I have found interesting article http://hashrocket.com/blog/posts/ember-routing-the-when-and-why-of-nesting and implemented nesting via {into: 'application'}, but to make it work correctly i have overrided renderTemplate hook in all templates to define correct rendering order.
And everything works fine.
I do something similar but without the multiple IDs. Try this in your router:
this.resource('videos', { path: '/videos' }, function () {
this.resource('video', { path: '/:video_id' });
this.resource('videos.video.slide', { path: '/videos/:video_id/:slide_id' });
});
Your routes should be App.VideosRoute, App.VideosVideoRoute, and App.VideosVideoSlideRoute. Same for the controllers (if needed)
I'm aware that ember doesn't support this, as per http://emberjs.com/guides/routing/defining-your-routes/ : "You cannot nest routes, but you can nest resources"
But what I'm trying to do seems reasonable, so I'm assuming there's support for this somewhere.
The goal here is to have a structure like this:
this.resource('project', { path: '/project/:project_id' }, function(){
this.route('manage', function(){
this.route('settings');
this.route('team');
this.route('notifications');
/* etc */
});
});
In words, I'd like to have a "manage" section with subsections for the things you can manage, all of which referencing my "project" instance.
I could do this:
this.resource('project', { path: '/project/:project_id' }, function(){
this.route('manage.settings',{path : '/manage/settings'});
this.route('manage.team',{path : '/manage/team'});
/*etc*/
});
But where this fails is:
I can't share a nav between resource subsections (i.e have a manage template with an outlet that is populated by the sub route)
My settings.hbs doesn't isn't accessing the parent resource (I'm sure this is fixed inside the router config's "model" or "setupController" hooks, I'm just not sure which / how)
Any help?
Why not use a nested resource?
this.resource('project', { path: '/project/:project_id' }, function(){
this.resource('manage', function(){
this.route('settings');
this.route('team');
this.route('notifications');
/* etc */
});
});
This is not so different from the post/comments resources described in the ember guides: http://emberjs.com/guides/routing/defining-your-routes/#toc_nested-resources
I'd like to have a "manage" section with subsections for the things you can manage, all of which referencing my "project" instance.
Ok. So using nested-resources approach you will have a manage.hbs template. To reference the project instance from the manage section or any of the subsections just use needs like this:
App.ManageController = Ember.Controller.extend({
needs: "project",
projectBinding: "controllers.project"
});
See http://emberjs.com/guides/controllers/dependencies-between-controllers/ for more detail.
I am currently trying to migrate my Ember based on pre1 to the current release pre4. In my pre1-code, i defined a route as follows:
formCreated : Ember.Route.extend({
route : '/genre=:genre/sorting=:sorting/location=:location/range=:range/time=:date/:timeFrame',
....
})
This Route worked fine for me, but now i am struggling to mimic this behaviour with pre4. This is my approach:
App.Router.map(function() {
this.route("/");
this.route("formCreated", { path: "/genre=:genre/sorting=:sorting/location=:location/range=:range/time=:date/:timeFrame" });
});
App.FormCreatedRoute = Ember.Route.extend({
serialize: function(context, params){
// here i am returning a hash containing all the dynamic segments
}
});
What is going wrong?
When the App enters the state, the URL does not get updated properly. I am seeing this result:
/genre=:genre/sorting=:sorting/location=:location/range=:range/time=:date/6:00-19:00
So most of my dynamic segments do not get updated. I made sure that my custom serialize method is returning an appropriate hash object, where one property for each dynamic segment is set.
Are multiple dynamic segments per route still possible with pre4 or do i have to switch to some route nesting approach or something like that?
UPDATE: Root cause found:
I just discovered that the error happened because of the syntax i used for the route. I changed it to the following(replaced the "=" with "/"):
this.route("formCreated", { path: "/genre/:genre/sorting/:sorting/location/:location/range/:range/time/:date/:timeFrame" });
Is there any documentation on how the path may be structured? It seems that syntax has changed since ember-pre1. I would like to have a user friendly URL and those numerous Slashes make it difficult to read. Or is the rule, that a segment always has to start with ":/"?
You will need to use resource nesting, like described here and here
App.Router.map(function() {
this.route('/');
this.resource('genre', { path: '/genre/:genre_id' }, function(params) {
this.resource('sorting', { path: '/sorting/:sorting_id' }, function(params) {
...
});
});
});