We are trying to keep the current route active when a child route is accessed from an another child route of same parent.
this.route('example', {path: '/example'}, function () {
this.route('user', {path: '/:user1'});
this.route('article', {path: '/:user1/:article'});
});
When I navigate from 'user' route to 'article' route, the 'example' route is not keeping the 'user' route selected button active.
You will have to use link-to's current-when. It allows to specify for which routes should that specific link-to be considered active. It is not deprecated.
Alternatively, if you want to do it with routing, you can change them to the following:
this.route('example', {path: 'example'}, function () {
this.route('user', {path: ':user1'}, function() {
// implicit index route
this.route('article', {path: ':article'});
});
});
You would move user to user.index, and article to user.article.
Related
Consider routes:
this.resource('things', {path: '/things/:id'}, function () {
this.route('edit');
});
Inside controller of the edit, how do I access the :id?
You can use the paramsFor method in the route to get parent route parameters.
So in your case you can also use the setupController hook of the edit route,
setupController(controller,model){
this._super(...arguments);
let { id } = this.paramsFor(this.routeName);
controller.set('thingsId',id);
}
What is the difference between router and route in emberjs? I wanted an implementable explanation if possible
Router - ember application will have one Router, it manages transitions between routes and it contains map of all routes. You specify map of routes like so:
App.Router.map(function(){
this.route('post', { path: '/post/:post_id' }, function() {
this.route('edit');
this.route('comments', { resetNamespace: true }, function() {
this.route('new');
});
});
});
from which Router is able to identify structure of routes and their accepting params. It activates corresponding Route when you navigate to particular path/url in browser ember router docs
Route - for each path/route you will have Route object, when you change path/url in browser corresponding Route gets activated for that path and set up everything (controller, template) which relate to that route (that has same name usually).
ember route docs
read more
The practical difference between these two is that resource may contain other routes, whereas route cannot. Additionally, this.resource automatically creates an index route when it sees you have sub-routes.
App.Router.map(function() {
this.resource('records', function() {
// this.route('index') is created automatically in here
this.route('new');
});
this.route('about');
});
While you could always use this.resource and have things work correctly, this.route explicitly creates router leaf states and therefore will lead to a more precise and efficient graph of states for your app.
Router.map(function() {
this.route('login', {path: '/'});
this.route('signup');
this.route('forgot-password');
this.route('main');
});
I have the follow problem, when I use '/login' y I try manually to put /main this won't will redirect to me to '/login'
I wanna control the access because a I can navigate on all my templates if I write it into the search box
From the guides:
If you want to redirect from one route to another, you can do the transition in the beforeModel hook of your route handler.
http://guides.emberjs.com/v1.11.0/routing/redirection/#toc_before-the-model-is-known
In your case, if you want to automatically make visiting / redirect to /login:
// app/router.js
Router.map(function() {
this.route('login');
});
// app/routes/index.js
export default Ember.Route.extend({
beforeModel: function() {
this.transitionTo('login');
}
});
I'm trying to make a namespace within Ember routes and I'm not sure how to do it. I have a resource which should have nested resources when it is in an edit mode. For example:
/category
/category/edit
/category/edit/subcategory
/category/edit/subcategory/new
But when I try to do
App.Router.map(function() {
this.resource('category', function() {
this.resource('edit', {path: '/edit'}, function() {
this.resource('subcategory', function() {
this.route('edit');
});
});
});
});
I get this:
category.index
edit.index
subcategory.edit
subcategory.index
But what I really want is something like:
category.index
categoryEdit.index
subcategory.edit
subcategory.index
Or maybe even:
category.index
categoryEdit.index
categoryEdit.subcategory.edit
categoryEdit.subcategory.index
What would be the proper way to setup this type of route?
For a little more information subcategory is a modal, so I want the category view (behind it) to be in the edit state if the user was to refresh the url on that page.
Can some one explain why nested resources require to list the path hierarchy in the route name instead of just the route?
Eg. resource1 > resource1.resource2
Emberjs seems to be all about reducing the amount of code. Is there some usecase for resources I don't see which explains why resources should be defined this way.
I couldn't get my example to work in jsfiddle or jsbin so I hosted it here: http://emberjs.mattmazzola.net/
I was basing my solution from the technique described in this similar StackOverflow question is here: Ember.js pre4 multiple nested routing
Basically, you notice I have a resource 'animals' with sub resources 'cats' and 'dogs'. However, if I just name them 'cats' and 'dogs' respectively the router says "route animals.cats' is not found. Then if I add the 'animals.' prefix to make the nested route 'animals.cats' the url becomes index#/animals/animals.cats which doesn't make sense. Of course we fix this by overriding the path attribute, but I don't understand why Emberjs doesn't do this by default. Am I defining my resources/routes incorrectly and this is a side affect?
In other words, I'm currently doing this:
App.Router.map(function() {
this.resource('products', function() {
this.route('desktops');
this.route('laptops');
});
this.resource('animals', function() {
// the url for this route is bad, but default behavior?
this.resource('animals.cats', function() {
this.route('cat', {path: ':cat_id'});
});
// Why does this require stating the parent route 'animals' again?
this.resource('animals.dogs', {path: 'dogs/'}, function() {
this.route('dog', {path: ':dog_id'});
});
});
});
How can I write routes like this:
App.Router.map(function() {
this.resource('products', function() {
this.route('desktops');
this.route('laptops');
});
this.resource('animals', function() {
this.resource('cats', function() {
this.route('cat', {path: ':cat_id'});
});
this.resource('dogs', function() {
this.route('dog', {path: ':dog_id'});
});
});
});
hmm, i think the second version should work if you have App.AnimalsIndexRoute, App.CatsIndexRoute and App.DogsIndexRoute (and possibly a few other Ember.Routes) defined correctly. could you maybe post the rest of your code here or in a jsfiddle if you still have that problem?