When I try to render into a alternative layout from a route, I get a error saying the layout is not found. Uncaught Error: Assertion Failed: You attempted to render into 'popup' but it was not found
Is it not possible to render into a alternative layout? I want to render the view but without navigation.
If I render into application it works fine
My route looks like
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.find('information', params.information_id);
},
renderTemplate: function() {
this.render('informations/show', {
into: 'popup'
});
}
});
The routes nesting will define your layout. So don`t compose routes with models in mind.
If you want your navigation only on your application route, put them in the application.index route. if it is not clear what is rendered, turn on debugging.(https://guides.emberjs.com/v1.10.0/understanding-ember/debugging/).
PS: we call it "outlet"
Related
I can't handle navigation from one modal window to another.
I have routing module:
{
path: 'modal1',
component: Modal1Component,
outlet: 'modal',
}, {
path: 'modal2',
component: Modal2Component,
outlet: 'modal',
}
Main component: MainComponent and in its template i have
<router-outlet name="modal"></router-outlet>
So i am clicking a button that triggers
this.router.navigate([this.router.url, { outlets: {modal: 'modal1'} }]);
And in Modal1Component that is rendered i have a button for modal2. So i want to call modal2 from modal1. How can i tell router to go to the parent route and then call:
this.router.navigate([/* what should be here? */, { outlets: {modal: 'modal2'} }]);
It looks like you're just changing the outlet in your router.navigate, but the route itself is not actually changing. And I don't think you actually require a named outlet to do what you're trying to achieve.
When you use router.navigate, you can specify if you want to navigate relatively from somewhere using the ActivatedRoute class. To do so, you have two options :
navigate relatively from you current component and indicate in the path that you want to "go up" one level. Example :
this.router.navigate(['../modal2'], { relativeTo: this.activatedRoute });
navigate directly from you parent. I would personaly use this one but both works. Example :
this.router.navigate(['modal2'], { relativeTo: this.activatedRoute.parent });
I created a mini repo with an example of what (I think) you're trying to achieve on : stackblitz.
Hope that helps
Some service can be useful in this case, like in doc:
https://angular.io/guide/component-interaction
Really new to ember and trying to setup basic (in my mind) routes.
I have calendars resource and I want to display individual calendars.
My app/router.js has the following:
this.route('calendar', {path: 'calendars/:calendar_id'}, function () {
this.route('show');
this.route('edit');
});
this.route('calendars', function(){
this.route('create');
});
Folders are as following:
app/routes: [
calendars: [create, index],
calendar: [edit, show]
]
app/templates: [
calendars: [create, index]
calendar: [edit, show]
]
In app/routes/calendar/show.js:
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.store.findRecord('calendar', params.calendar_id);
}
});
Problems start when I go to http://SERVER/calendars/5/show (5 is a :calendar_id part, SERVER is what hosts ember app) :
when I log params - they are undefined
In dev tools I see that Ember somehow makes a POST request to my server as http://SERVER/calendars/5
(a :calendar_id part, SERVER is on same domain and where my back-end resides).
This happens regardless if I comment out model() function in app/routes/calendar/show.js file.
Apparently Ember knows what calendar_id to use for that request.
But I don't know where that call to the server happens:
If I comment out model(){} altogether, my template renders model record (the calendar record that Ember fetches).
If I on the other hand try to log params in model() and I comment out this.store.findRecord part out, the params are undefined and it raises an error.
I thought at first that it is my DS.RESTAdapter since I have defined updateRecord changes to fake PUT request (my server does not allow that), but I commented out the whole file and it still does this query.
I've cleaned both dist/, tmp/, upgraded to 2.9.0, but it does the same thing.
I have no controllers defined
How does Ember make POST request if model() hook is missing from route, I have no controllers difined. Also how do I fix it so that it works? ;p
Edit [2]:
I am trying this now and I think it kinda works, but looks ugly:
this.route('calendars',{ path: '/calendars'}, function(){
this.route('create');
});
this.route('calendar', { path: '/' }, function () {
this.route('show', { path: '/calendars/:calendar_id/show' });
this.route('edit', { path: '/calendars/:calendar_id/edit' });
});
this.route('index', { path: ''});
Ember is smart enough to generate a default route if you do not create one, and a default model if you do not create a model function.
It does this based on the routes name ie if your route is "calendar" it generates a model function based on the "calendar" model.
Try explicitly define your route path with the parameters as per ember docs:
https://guides.emberjs.com/v2.9.0/routing/defining-your-routes/
this.route('calendar', function () {
this.route('show', { path: '/:calendar_id/show' });
this.route('edit', { path: '/:calendar_id/edit' });
this.route('create');
});
How do you override the routeIfAlreadyAuthenticated?
And once that happens, how can it transition to a route with a dynamic segment?
I realize I can override sessionAuthenticated; and in that ways override the functionality of routeAfterAuthentication. However, routeIfAlreadyAuthenticated is a computed property that is executed in a beforeModel in the unauthenticated-route-mixin.js mixin.
Any help would be greatly appreciated.
In app/session/route.js, just do:
import Ember from 'ember';
import UnauthenticatedRouteMixin from 'ember-simple-auth/mixins/unauthenticated-route-mixin';
export default Ember.Route.extend(UnauthenticatedRouteMixin, {
routeIfAlreadyAuthenticated: 'dashboard'
});
and it works, no more:
Error while processing route: session.login Assertion Failed: The route index was not found Error
The following works as well, but is deprecated
In config/environment.js:
var ENV = {
...
};
ENV['ember-simple-auth'] = {
// authenticationRoute: 'login',
// routeAfterAuthentication: 'dashboard',
routeIfAlreadyAuthenticated: 'dashboard'
};
I have a popup component in which i have a button and on click of that if im in my target route (mainRoute) i just want to pass the query parameters to my current route, but if i'm in another route i just want to transit with new query parameters. I know neither transitionTo or transitionToroute work. Is there any way to do that?
The transitionTo wouldn't work because you don't have access to routing from inside your component context. You can add the routing support at any place in your app using -routing service like so:
export default Ember.Component.extend({
routing: Ember.inject.service('-routing'),
someFuncUsingRouting(){
let routing = this.get('routing');
routing.transitionTo('some-route');
}
});
This is my code for logout function that close the session and redirect you to /login route.
import Ember from 'ember';
export default Ember.Component.extend({
authManager: Ember.inject.service('session'),
routing: Ember.inject.service('route'),
tagName: '',
actions: {
invalidateSession() {
console.log("logout invalidateSession");
this.get('authManager').invalidate();
let routing = this.get('routing');
routing.transitionTo('login');
}
}
});
This is working code for:
ember-cli: 2.8.0
node: 7.1.0
Is there a way to execute when a "base" route is activated/re-activated? I have the following urls:
Router.map(function() {
// /projects
this.resource('projects', function() {
// /projects/2
this.resource('project', {path: ':id'});
});
});
I'd like to transitionTo the individual project route if there is only one project returned from the projects route. I can do this:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.findAll('project');
},
afterModel: function(projects, transition) {
if (projects && projects.get('length') === 1) {
this.transitionTo('project', projects.get('firstObject'));
}
}
});
This works nicely...except i can still go to the projects route and since the model has already been loaded that hook doesn't fire again. Is there a way to listen to always enforce that rule when the projects route is activated?
For example, if i go to /projects/23 and then i go to /projects i'd like to auto-transition them to the single project route if there is only one. I don't know how to accomplish that since it's a nested route and the activate and afterModel methods have already been fired when visiting /projects/23 for the first time.
Does that make sense? and how can i accomplish this?
Use an index route on your projects resource. It will only get hit when you hit /projects
ProjectsIndex
export default Ember.Route.extend({
model: function() {
var projects = this.modelFor('projects');
if (projects && projects.get('length') === 1) {
this.transitionTo('project', projects.get('firstObject'));
}
},
});