I looked through related posts for hours, but could not find the right answer to fix the problem I'm having.
I keep getting the error:
Uncaught Error: Nothing handled the action 'edit'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.
I think that the controller is handling things wrong, or it's bubbling up to a wrong route?
App.EventDetailsController = Ember.ObjectController.extend({
isEditing: false,
actions: {
edit: function() {
this.set('isEditing', true);
},
doneEditing: function() {
this.set('isEditing', false);
}
}
});
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
this.route('events', {path: '/events'});
this.route('createevent', {path: '/createevent'});
this.route('eventdetails', {path: ':eventdetails_id'});
});
App.EventsRoute = Ember.Route.extend({
model: function() {
return events;
}
});
App.EventDetailsRoute = Ember.Route.extend({
model: function(params) {
return events.findBy('id', params.eventdetails_id);
}
});
Does anyone know why this wouldn't work?
You probably want to define your routes like this:
App.Router.map(function() {
this.resource('events', function() { // /events <-- your event listing
this.resource('event', {path: ':event_id'}, function() { // /events/1 <-- your event details
this.route('edit'); // /events/1/edit <-- edit an event
});
this.route('create'); // /events/create <-- create your event
});
});
But aside from that, note that actions bubble up through the Routes, so try moving your actions handler to the EventDetailsRoute instead.
Read the part in the guide that talks about it here: http://emberjs.com/guides/templates/actions/#toc_action-bubbling
App.EventDetailsRoute = Ember.Route.extend({
actions: {
edit: function() {
this.set('isEditing', true);
},
doneEditing: function() {
this.set('isEditing', false);
},
//or maybe better:
toggleEditing: function() {
this.toggleProperty('isEditing');
}
},
model: function(params) {
return events.findBy('id', params.eventdetails_id);
}
});
I have a suspicion it has to do with not using the proper naming conventions. If your route's name is EventDetailsRoute then the route should be referenced in the router as event-details.
This problem is caused when our template and controller name is different. Please check your template and controller name
I have also faced similar problem. But in my case, I have called a route action from a controller action in which, I have used transitionToRoute.
Since the transition to another route was finished even before the completion of route action, the error was thrown " Nothing handled the action actionName. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble".
Reference: https://discuss.emberjs.com/t/sending-action-from-current-controller-to-current-route/6018
Related
This might be a silly question, but I can't find out anything about it anywhere...
I create a method in one of my controller to verify if the user session is still good, and I'm using this method in almost every page of my app in my beforeModel. But the thing is that I don't want to copy/paste the code every time in every route, this will be dirty and I really don't like it.
Lets say I have this controller :
App.LoginController = Ember.ObjectController.extend({
...
isSession: function() {
var session = this;
Ember.$
.get(host + '/session', function(data) {
console.log('DEBUG: Session OK');
})
.fail(function() {
console.log('DEBUG: Session FAIL');
session.transitionToRoute('login');
});
}
});
How can I call it in this router :
App.HomeRoute = Ember.Route.extend({
beforeModel: function(transition) {
//Here
},
model: function() {
return this.store.all('login');
}
});
I've tried this this.get('loginController').isSession(); but I receive this error Error while loading route: TypeError: Cannot call method 'isSession' of undefined
Thanks for the help !
[edit]
I don't have much to show but this :
My map
App.Router.map(function() {
this.route('login', { path: '/' });
this.route('home');
this.resource('enquiries', function() {
this.route('enquiry', { path: '/:enquiry_id' }, function() {
this.route('update');
});
});
});
Most likely I only Have a LoginController and my HomeRoute. (its the beginning of the app)
I don't need to create a Route for my Login because I have an action helper in my login template and I'm redirected to my Home template after that.
You need to use controllerFor() method in order to call method on controller from router. If method is an action you need to use send() method, like this.controllerFor('login').send('isSession')
App.HomeRoute = Ember.Route.extend({
actions: {
willTransition: function(transition) {
transition.abort();
this.controllerFor('login').isSession()
}
});
If you don't need a return value from isSession you might consider making it an action on a top-level route. The router.send method in the docs has a pretty good example of how you declare actions as well as how you call them. Note that send is also a method you can call on a controller. Actions bubble up from a controller, to the parent route, and then all the way up the route hierarchy, as shown here
I have the following routes :
this.resource('categories', function() {
this.route('add');
this.resource('category', {path: ':category_id'}, function() {
this.route('edit', {path: "/edit"});
this.resource('products', function(){
this.route('add');
this.resource('product', {path: ':product_id'});
});
});
});
Everything works except the edit route. For some weird reason, my model doesn't get initialized.
App.CategoryRoute = Ember.Route.extend({
model: function (params) {
console.log(this.store.getById('category', params.category_id)); // Returns what I want
return this.store.getById('category', params.category_id);
},
//other stuff
});
After couple of trial/errors, I found out that my CategoryEditRoute overwrite my model. I'm not 100% sure about this statement, but it looks like it. If I try to set up my model in this route, I can't access my params... without my params I can't know what model to load!!!
App.CategoryEditRoute = Ember.Route.extend({
model: function (params) {
console.log(params); // Result in: Object {}
return this.store.getById('category', params.category_id); // Undefined
},
// Other stuff
)}
Thanks for taking the time to help.
App.CategoryEditRoute = Ember.Route.extend({
model: function() {
return this.modelFor('category')
},
});
This will use the model that was resolved in the category resource.
Do also note that routing in Ember is different from routing in Rails, for example. You typically nest routes if the views are nested. There is nothing wrong with (and may actually make things easier and simpler) doing this:
this.route('categoryEdit', {path: ':category_id/edit'})
How can I have a bit of code executed whenever / route is visited?
I have this now:
App.indexController = Ember.Controller.extend({
showFront: function () {
alert("zzz");
}
});
But I am stuck. How can I make it actually work?
You can use beforeModel and setupController hooks to execute code when a route is loaded.
App.Router.map(function(){
this.resource('posts', { path: '/posts' }, function() {});
});
App.PostsRoute = Ember.Route.extend({
// http://emberjs.com/api/classes/Ember.Route.html#method_beforeModel
beforeModel: function() {
console.log("beforeModel fired");
},
// http://emberjs.com/api/classes/Ember.Route.html#method_setupController
setupController: function(controller, model){
this._super(controller, model);
console.log("setupController fired");
},
model: function(){
// resolve the promise after a short delay
return Ember.RSVP.Promise(function(resolve, reject){
setTimeout(function(){
resolve(true);
}, 2000);
});
}
});
beforeModel will fire, as the name suggests, before the model is loaded and setupController will fire after the model has loaded. The example in the JSBin uses a delayed loading model to demonstrate the difference.
This example shows the hooks being used for App.Post route, but you can use this on App.ApplicationRoute if you want to have code execute when loading the default route.
JSBin example
You first need to define a route, and then call a function on it.
Read how here:
http://emberjs.com/guides/routing/defining-your-routes/
My routing structure:
App.ready = function() {
App.Router.map(function() {
this.resource('contacts', function() {
this.resource('contact', function() {
});
});
});
}
Now in my contactsController I respond to and add action that transitions to the contact route. I would then like to call the add method on my contactController.
I have placed the needs: ['contact'] on my ContactController but then I get this message:
<App.ContactsController:ember197> needs controller:contact but it does not exist
When I use controllerFor (which is deprecated) I also get an error:
this.controllerFor('contact').add();
So Ember.js RC1 appears to only create the controllers (and other related instances) once one actually transitions to the appropriate route.
Is there a way around this.
So Ember.js RC1 appears to only create the controllers (and other related instances) once one actually transitions to the appropriate route.
Interesting - I had thought ember generated controllers earlier but guess not.
Is there a way around this?
Workaround is to define App.ContactController manually. Something like this will work:
App = Ember.Application.create({});
App.Router.map(function() {
this.resource('contacts', function() {
this.resource('contact', function() {
});
});
});
App.ContactController = Ember.Controller.extend({
add: function() {
alert('App.ContactController.add() was called!');
}
});
App.ContactsController = Ember.Controller.extend({
needs: ['contact'],
add: function() {
this.get('controllers.contact').add();
}
});
http://jsbin.com/osapal/1/edit
When the main view of my application is switched (new route that reconnects the main outlet of my application controller) I want the page to be scrolled to the top. Otherwise it's a bit strange that I navigate to another page-like view and the viewport is still lost somewhere where I left off.
I hacked a solution and wonder if there's a better way or if anyone has the same thing.
Here's what I do:
App.ApplicationController = Ember.Controller.extend({
connectOutlet: function(){
window.scrollTo(0, 0);
this._super.apply(this, arguments);
}
});
#Baruch's solution is good, but when I implemented it I had render on elements within my application state and would cause a scrollTop when it was not needed.
I found this to be much more effective as it only runs on the path change:
App.ApplicationController = Ember.Controller.extend({
currentPathChanged: function () {
window.scrollTo(0, 0);
}.observes('currentPath')
});
I achieved this with the following code:
Ember.Route.reopen({
render: function(controller, model) {
this._super();
window.scrollTo(0, 0);
}
});
Coffee Script:
Ember.Route.reopen
activate: ->
#_super()
window.scrollTo(0, 0)
Javascript:
Ember.Route.reopen({
activate: function() {
this._super();
window.scrollTo(0, 0);
}
});
You should probably try and extend Ember.Route and add your window.scrollTo in the enter callback. Then instead of using Ember's Route for your leaf routes, you call your route .extend(), so they'll automatically scroll up when you enter a route/state. Something similar to this:
// define your custom route and extend "enter"
var MyRoute = Em.Route.extend({
enter: function(router) {
// for now on, all the routes that extend this,
// will fire the code in this block every time
// the application enters this state
// do whatever you need to do here: scroll and whatnot
}
});
App.Router = Em.Router.extend({
enableLogging: true,
location: 'hash',
index: Em.Route.extend({
route: '/',
connectOutlets: function(router) {
...
},
// on your leaf routes, use your own custom route that
// does your scroll thing or whatever you need to do
home: MyRoute.extend({
route: '/',
connectOutlets: function (router, context) {
...
}
}),
// other routes...
})
});
does it make sense?
It's now render(name, options), and if you are specifically calling render (ie with a modal) you want to pass that to super()
Ember.Route.reopen({
render: function(name, options) {
if (name != null) {
return this._super(name, options);
} else {
return this._super();
}
}
});
Ember 3.12+ (this is technically 3.20 code listed here)
import EmberRouter from '#ember/routing/router';
const Router = EmberRouter.extend({
init() {
// call event everytime route changes
this.on('routeDidChange', () => {
this._super(...arguments);
window.scrollTo(0, 0); // scrolls to top
});
}
});
Router.map(function () {
// your mapping code goes here
});
export default Router;
Prior to 3.12 (this is technically 3.4 but the key code should be the same)
import EmberRouter from '#ember/routing/router';
const Router = EmberRouter.extend({
didTransition() {
this._super(...arguments);
window.scrollTo(0, 0);
}
});
Router.map(function () {
// your mapping code goes here
});
export default Router;
We have handled this problem serveral times and the way we've found that is the easiest and most straight-forward way is to configure this once in the router.js file using a 'route transition' event function. We used didTransition before it got deprecated in Ember 3.12 in lieu of routeDidChange. I've posted both examples below. Some syntax may differ slightly depending on which version of Ember you are on but this core code should be the same.