I'm trying to follow the guide here which is just active last 3 months - https://gist.github.com/machty/5723945
So i had my code like this:
App.UsersRoute = Em.Route.extend
beforeModel: (transition) ->
alert('before')
model: ->
App.User.find({}).then (response) ->
# my code here parses response and sets it
self.controllerFor('users').set('content', response.users)
# for some reason i need to at least return an array
[]
events:
error: (error, transition) ->
alert(error.message)
But the error callback under events is never triggerd. I force my server to return a 500 server error.
beforeModel (or afterModel) isn't triggered as well.
Example of how I would do this using the latest builds of Ember and EmberData:
App = Ember.Application.create({});
App.User = DS.Model;
App.IndexRoute = Ember.Route.extend({
beforeModel: function(){
alert('before');
},
model: function() {
this.store.find('user', {}).then(function() {
alert('response');
}, function() {
alert('error');
});
}
});
Live Demo
Errors can be handled in the second (reject) callback of the promise (then).
Related
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
I'm trying to get a param from the URL, but it appears it doesn't get assigned at all. I was following this guide http://emberjs.com/guides/routing/query-params/
Below is the index.js controller.
export default Ember.Controller.extend({
queryParams: ['authToken'],
authToken: null,
init: function() {
var authToken = this.authToken;
console.log(authToken);
}
});
When accessing the root URL / or /#, authToken is null, which works as expected. However, when trying out /#?authToken=123, it's still null. Any ideas ?
Well, I couldn't get value of authToken inside init hook - I think it's called too early, but you can wrap this in Ember.run.next method or get its value in setupController hook in IndexRoute. This works as expected:
App.IndexRoute = Ember.Route.extend({
setupController: function (controller, model) {
console.log(controller.get('authToken'));
}
});
App.IndexController = Ember.Controller.extend ({
queryParams: ['authToken'],
authToken: null,
init: function() {
this._super();
Ember.run.next(this, function() {
console.log(this.get('authToken'));
});
}
});
For example, URL site.com#/?authToken=lol produces following console output:
app:49 lol
app:59 lol
Working demo.
I'm fairly new to ember.js and I'm doing some experiements. I recently hit a bit of a wall when trying to delete records. Here is my editing route (from which I call delete)
App.PostsEditRoute = Ember.Route.extend({
model: function(params){
return App.Post.find(params.id);
},
exit: function() {
this._super();
tx = this.get('currentModel.transaction');
if(tx)
tx.rollback();
},
setupController: function(controller, model){
controller.set('content', model);
},
events: {
save: function(post){
post.one('didUpdate', this, function(){
this.transitionTo('posts.show', post);
});
post.get('transaction').commit();
},
cancel: function(){
this.transitionTo('posts.show', post);
},
destroyPost: function(context) {
var post = context.get('content');
post.deleteRecord();
post.get('store').commit();
this.transitionTo('posts.index');
}
}
});
So I have a link through which I trigger destroyPost. The record is successfully deleted, and I start to transition to the index route, but an error occurs...
Uncaught Error: Attempted to handle event rollback on while in state rootState.deleted.inFlight. Called with undefined
After this, loading the models for the index page stops and I get an empty page. I can provide any additional code required. Here is the index route.
App.PostsIndexRoute = Em.Route.extend({
model: function(){
return App.Post.find();
},
setupController: function(controller, model){
controller.set('content', model);
}
});
I should note that both of these routes load correctly by themselves. It's only in transition that I get failure.
You need to bind to didDelete like you did with didUpdate in save method.
destroyPost: function(context) {
var post = context.get('content');
post.one('didDelete', this, function () {
this.transitionTo('posts.index');
});
post.deleteRecord();
post.get('transaction').commit();
}
Also, your code seems a bit inconsistent: in the save method you're committing a separate transaction, while in destroyPost you are committing the whole store.
I'm trying to start to build a admin system that will run on a /admin/ prefix.
Here is my routes file
App.Router.reopen
location: 'history'
rootURL: '/admin'
App.IndexRoute = Ember.Route.extend
setupController: (controller, model) ->
#controllerFor('application').set('currentRoute', 'home')
When I go to /admin I get the following error:
Uncaught Error: No route matched the URL '/admin'
I'm just starting with emberjs, and my code is based on this serie
Ember version: v1.0.0-pre.4
Ember-data current api revision:: 11
In old-router the 'rootURL' property would have been ignored when resolving routes. In the latest version of ember, rootURL only seems to be used when constructing links. Not sure if this is a bug or oversight. As a workaround, try this instead:
App.Router.map(function() {
this.resource("admin", { path: "/admin" }, function() {
this.route("other");
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('admin');
}
});
When talking about routing in emberjs, it depends which version you are using. There was a big API change between 1.0pre2 and 1.0pre3. The docu on www.emberjs.com is already up-to-date for the new API and and easy to understand.
Below a really small example that shows
IndexRoute that automatically redirects to the overview of all members at '/members'.
Dynamic routing based on an ID
Serialization/Deserialization in case that the parameter is not 'id' but something else. In the example below, it is 'refId' (stands for reference ID).
Well, the examle does not really show more than the official documentation. but add-on information is always nice.
So, hope this helps. cheers.
App.Router.map(function() {
this.resource("members", { path: '/members' });
this.resource("member", { path: "/members/:refId" }, function() {
this.route("delete");
});
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('members');
}
});
App.MembersRoute = Ember.Route.extend({
model: function() {
return App.Member.findAll();
}
});
App.MemberRoute = Ember.Route.extend({
model: function(params) {
return App.Member.find(params.refId);
},
// overwrite default serializer (defaults to 'id', member has 'refId')
serialize: function(model) {
return { refId: model.refId };
}
});
I'm porting an existing app to the new router api and can't find an example where someone reaches into the router and grabs the apps store to query for data.
Here is my old router
CodeCamp.Router = Ember.Router.extend({
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
connectOutlets: function(router, context) {
router.get('applicationController').connectOutlet('sessions', router.get('store').findAll(CodeCamp.Session));
}
})
})
});
Here is the start to my new router but the "router.get('store')" doesn't like the word router and the keyword "this" also returns undefined.
CodeCamp.Router.map(function(match) {
match("/").to("sessions");
});
CodeCamp.SessionsRoute = Ember.Route.extend({
renderTemplates: function() {
this.render('sessions');
},
setupControllers: function() {
this.set('controller.content', this.get('store').findAll(CodeCamp.Session));
}
});
Update
I can get it to work with the following (it just seems ugly and I'd prefer another way)
setupControllers: function() {
this.set('controller.content', CodeCamp.Session.all().get('store').findAll(CodeCamp.Session));
}
Just use CodeCamp.Session.find() ;)