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');
Related
I have the routes defined in following way
this.route('league', {path: '/league'}, function () {
this.route('matches', {path: '/'});
this.route('create-team', {path: '/:matchId'}, function () {
this.route('team',{path: '/team'});
});
});
And i am trying to load all the players associated with a matchId inside team router as following
import Route from '#ember/routing/route';
export default Route.extend({
model: function(params) {
return this.store.query('player', {'match': params.matchId});
}
});
The problem is that the params is empty. I tried to pass in hard values to the json query and it worked with get request but it doesn't work like this. Where am i going wrong with this ?
In your child route, you can call paramsFor and fetch the parameters (including query parameters) for a named route.
In your case, I believe you'll call
let params = this.paramsFor('league.create-team')
let match = params.matchId;
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');
}
});
I have a scenario where there are "jobaids" - jobaids belong to "businessunits", "systemapplications", and "courses" & finally "businessunits" have many of all of the above.
When entering the project you start on the "businessunits" route (#/businessunits), where they are listed as "#link-to"s they link to a show view and when clicked move you to #/businessunits/:businessunits_id
When you arrive on this template there is a an option to view the current "Businessunit"s related "Jobaids" by "systemapplication", "course" or just "show all"
Since the easiest place to start in consideration of the model relationships (and because I'm new with ember), is the "show all" option, and that's where I've started.
So - what I need to do is get the :businessunit_id in...
#/businessunit/:businessunit_id
to be seen by the processing in the
#businessunit/:businessunit_id/jobaids
...to be able to apply to that route, a model consisting of something like
this.store.find('jobaid', {businessunit_id: ID-FROM-PARENT-ROUTE})
so far I have...
/app/router.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.resource("businessunits", function() {
this.route("show", { path: ":businessunit_id" }, function(){
this.resource("jobaids", function() {});
});
});
});
export default Router;
...and the "show all" link leading to the route where I need the value of the parent id is an actual anchor tag with an {{action "getJobaids"}} which is handled with the show in the /app/routes/businessunits.js route
import Ember from 'ember';
export default Ember.Route.extend({
model: function(){
return this.store.find('businessunit');
},
actions: {
getJobaids: function(){
var url = location.href.split('/');
window.unitClicked = url[url.length-1];
this.transitionTo('jobaids');
}
}
});
then when you get to /app/routes/jobaids.js we're getting the needed id from the window...
import Ember from 'ember';
export default Ember.Route.extend({
model: function(){
return this.store.find('jobaid', {businessunit_id: unitClicked});
}
});
this is TERRIBLE but this works enough to get me to the next route (where there are some other problems I have yet to figure out relating to querying the fixture and or adapter) - HOWEVER this is NOT a desirable fix and will never keep state, basically eventually resulting in missing (necessary) variables when linking back
#/businessunits/undefined/jobaids
which as you can imagine breaks everything - so how do I do this in the genuine ember fashion without depending on a hacky use of bare bones js?
I ended up taking the development of this project in the direction of having an actual database back end to query against and let the relationships in ember's data library handle the nested object structure to access the relations returned in the JSON structure.
I have the following router setup in Ember where I am trying to capture a dynamic search term and pass it to the router for querying ember-data.
Router
this.resource('resources', function() {
this.resource('resource', { path: '/:resource_id' }, function() {});
this.resource('search', { path: '/search/:search_term' }, function() {});
this.route('new');
});
Route
export default Ember.Route.extend({
model: function(params) {
return this.store.findQuery('resource', {
sTerm: params.search_term,
limit: 15,
offset: 0
});
}
});
Unfortunately, search_term in not available in the route to pass into the query, I am unsure what is causing this not to work. If someone can point me in the right direction I would sure appreciate it. Thanks.
Update as requested
Logging this.constructor produces the following:
lrs-ui#route:search/index:
I have built this with ember-cli and the route is in search/index so this makes sense. Should I just have the route at search maybe?
Answer
As #kingpin2k led to, the route was in search/index and it needed to be in search, then everything worked just fine.
For historical sake, the index route doesn't pick up the params from the parent resource.
Changing the route from search/index to search fixed the issue.
I have the following controller and I'd like to bubble up an event using send
App.PersonController = Ember.ObjectController.extend({
page: function(page) {
var model = PersonApp.Page.create({id: page});
this.send("person.page", model); //should bubble up ...
}
});
here is my route setup
PersonApp.Router.map(function(match) {
this.resource("person", { path: "/" }, function() {
this.route("page", { path: "/page/:page_id" });
});
});
here is the simple page model (shim basically)
PersonApp.Page = Ember.Object.extend({
});
although I'm using the route "person.page" and I'm passing a valid model I get the following error (seemingly the router does not have this route?)
Uncaught Error: Nothing handled the event 'person.page'.
If it helps debug the controller / router relationship I noticed inside my controller if I dump this.get('target') ...
_debugContainerKey: "router:main"
and if I dig further ... and print this
this.get('target').get('router')
I see a router w/ my route under the currentHandlerInfos array ... not sure if I should be this deep though
... another slight update
If I do this (full blown) it seems to modify the window.location but my model/setupController hooks on the route are never hit
this.get('target').get('router').transitionTo(route, model);
I think, send is just used for events of a route. Assuming your controller would call send like this:
//in the controller
this.send("personPage", model);
// a matching Route
App.PersonRoute = Ember.Route.extend({
events : {
personPage : function(page){
// this should be called
}
}
});
For your case you need to leverage transitionTo (your access on the router property was too much, i think. The router instance of Ember.Router has again a router property. Pretty confusing :-)).
this.get("target").transitionTo("person.page", model);