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');
}
});
Related
I have an ember application (version 3.14) which I'd like to do a transition to a Route with dynamic segment
I'd like to redirect to /projects/other/2020 when user visits /projects/other
I change my projects/other route so it looks like this but it throws me an error
import Route from '#ember/routing/route';
export default Route.extend({
model: function(){
},
redirect() {
let year_data = {
year: '2020'
};
this.transitionTo('projects.other',year_data);
}
});
and this is how my projects route looks like in routes.js
this.route('projects', function() {
this.route('notable',{path: '/'});
this.route('other', function() {
this.route('list', {path: '/:year'});
});
});
these are the errors from google chrome console box
error screenshot
Error message is pretty clear. You are trying to redirect to projects.other.index route which does not have any dynamic segments. Also, according to docs, you need to pass an id and not an object. When you pass an object, ember treats it like ready to use model. So, your code should be
this.transitionTo('projects.other.list', '2020');
The following structure of routes works fine for me.
But whenever I moved faculty.js inside the faculty folder, my template stops recognizing the data. The static view elements still show up correctly, but the data model is logged as null. How can I fix it?
faculty.js
import Ember from 'ember';
export default Ember.Route.extend({
model(){
return {name:"Janusz", lastname:"Chudzynski", department:"Test"};
}
});
faculty.hbs
{{outlet}}
<h2>Faculty</h2>
{{log model}}
{{faculty-single facultyModel=model}}
Router
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: config.locationType,
rootURL: config.rootURL
});
Router.map(function() {
this.route('colleges');
this.route('departments');
this.route('faculty',{path:'/faculty'});
//this.route('faculty');
});
export default Router;
Console log
null
The hierarchy of your folders should closely mirror the hierarchy of your router. In your case you have the following:
Router.map(function() {
this.route('colleges');
this.route('departments');
this.route('faculty');
});
This means that all of them are directly under the application route, being the correct file structure:
app
routes
colleges.js
departments.js
faculty.js
For /app/routes/faculty/faculty.js to work, you would need to have a faculty route nested inside a faculty route:
Router.map(function() {
this.route('colleges');
this.route('departments');
this.route('faculty', function() {
this.route('faculty');
});
});
Since names concatenate, the parent route's full name is faculty, and the nested route's full name is faculty.faculty.
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/flawless
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/flawless
// console log would be: "manufacturer-209/series-881/tag-17143/none/494822/flawless"
}
});
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.
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 just starting with Ember JS and Ember CLI and trying to figure out this routing issue. I have a group model that has many game models. With the following route, I am able to display games just fine from a group URL:
Router.map(function() {
this.resource("groups", function() {
this.route('show', {path: ':group_id/show' });
});
});
This results in a URL with the form:
http://localhost:4200/groups/1/show
Suppose one of the group names is "wizards". I'd like to to be able to construct a URL in the following form and render all the games that belong to "wizards":
http://localhost:4200/wizards
Any tips are appreciated.
Like #blessenm points out in the comments, your router would change from
Router.map(function() {
this.resource("groups", function() {
this.route('show', {path: ':group_id/show' });
});
});
to
Router.map(function() {
this.resource("group", { path: ':group_name'});
});
The second parameter to this.resource() or this.route() is optional. If you don't pass anything in - it assumes the same name as your route/resource (groups, in your case). If you pass in an object that has a path: key - you are specifying what the url to the route is, including a dynamic segment. See here for Ember documentation on this.