How to settings the routers - ember.js

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');
}
});

Related

Add a parent route in ember for existing routes

Here is my problem,
assume I am having an ember app with following ember route configuration:
Router.map(function() {
this.route('todos', function() {
this.route('new');
this.route('view', {
path: "/:id"
});
});
this.route('articles', function() {
this.route('view', {
path: "/:id"
});
this.route('new');
});
});
Now i want to add the add the prefix for each route based on some user information i would be fetching.
For eg:
Below are the two user information
dev = {
id: 1,
workspace: 'DEV'
}
qa = {
id: 2,
workspace:'TEST'
}
once the dev is landing in the app, route must be like:
todos:
/DEV/todos/new
and same for the other users.
once the qa is landing in the page, route must be like:
/TEST/todos/new
to solve this i know we generate the parent route and add all the other route as child, need to change the file structure for this case.
Here is Ember :
ember-cli: 2.13.3,
ember-data: 2.18.5
This is straight forward in Ember.js using the router's path as URL paths can be customized easily.
For your case, the todos route should have a dynamic segment (say, workplace) and hence, the router entry will be like:
Router.map(function() {
this.route('todos', { path: '/:workplace/todos' }, function() {
this.route('new');
...
});
});
And if you are transitioning to new todo page using this.transitionTo('todos.new', 'TEST'), then URL will be updated as TEST/todos/new.
This twiddle has a tiny demo. Hope that helps :)

EmberJS nested subroute custom index path not working as expected

I'm following one of the Ember Guides on routing (v2.14.0) and I'm trying to set up a nested sub-route where the index route should redirect to a different subroute.
Router.map(function() {
this.route('about');
this.route('dashboard', function() {
this.route('index', { path: '/dashboard/calendar'});
// ^should direct all dashboard index requests to dashboard/calendar right?
// setting path = '/calendar' also doesn't work
this.route('calendar');
this.route('daily-journal');
});
});
However when I load up http://localhost:3000/dashboard, I get this error:
Any ideas what I did wrong?
If you want to redirect to another route / from the dashboard - you can use the redirect from the route: https://guides.emberjs.com/v2.14.0/routing/redirection/
You would just put something in your dashboard index route
import Ember from 'ember';
export default Ember.Route.extend({
beforeModel() {
this.transitionTo('dashboard.calendar');
}
});

Is current-when got deprecated in Ember 2.x.x?

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.

Ember nested global routes (Wildcard)

I'm trying to do something like this in my routes:
this.route('products', { path: "/products/*choises"}, function() {
this.route('promotion', {path: "/promotion/*offers"});
});
product route:
offerPath: function(params){
this.transitionTo('product.promotion', params);
}
The problem is that it doesn't matter the promotion that I visit, the app thinks is part of the products route.
How can I do this? I need them to be nested.
Update:
You can use beforeModel(transition) hook in router to check what's in the url.
http://example.com/products/manufacturer-209/series-881/tag-17143/none/494822/f‌​lawless
import Ember from 'ember';
export default Ember.Route.extend({
beforeModel(transition) {
console.log(transition.params.products.choises)
// if you use this url: http://example.com/products/manufacturer-209/series-881/tag-17143/none/494822/f‌​lawless
// console log would be: "manufacturer-209/series-881/tag-17143/none/494822/f‌​lawless"
}
});
At least you have the rest of the url so, you can filter out the important information and redirect with this.transitionTo() to the exact place.
You could have the following route:
http://example.com/products/123/promotions/456
or
http://example.com/products/awesome_souce/promotions/monday_deal
In the first case, your route would look like this:
this.route('product', { path: "/products/:product_id"}, function() {
this.route('promotion', {path: "/promotions/:promotion_id"});
});
In the second case, maybe like this:
this.route('product', { path: "/products/:product_name"}, function() {
this.route('promotion', {path: "/promotions/:promotion_name"});
});
Finally, your route handlers can download the proper models (example for the first case):
// app/routes/product.js
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.findRecord('product', params.product_id);
}
});
---
// app/routes/product/promotion.js
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
// you can get access to the parent route model if you need for the api query
const product = this.modelFor('product');
return this.store.findRecord('promotion', params.promotion_id);
}
});
If you need only the param from the product route, instead of returning a whole record, for example you can just return params.product_name, so you will have access to a string with this.modelFor('product') in a subroute level.

Emberjs equivalent of root to: "something" in Rails route

In emberjs routes, I have
App.Router.map(function() {
this.resource('about');
this.resource('projects');
});
about page shows up when I hit /about and projects page shows up when I hit /projects.
How do you make the about page show up even in / as well as /about?
Rails equivalent of would be something like
root to: "pages#about"
get 'about', to: 'pages#about'
get 'projects', to: 'pages#projects'
By default ember generates a IndexRoute mapping to '/'
App.Router.map(function() {
// By default ember generates a IndexRoute mapping to '/'
// this.route('index', { path: '/' });
this.resource('about');
this.resource('projects');
});
App.IndexRoute = Ember.Route.extend({
beforeModel: function() {
this.transitionTo('about');
}
});
So you can override the beforeModel from IndexRoute to transition to about route.