I have the following route:
this.resource('activities', { path: '/activities' }, function() {
this.route('on_date', {path: '/:user_id/:on_date'});
});
And I'd like to be able to have easy access to the variables :user and :on_date in my router and controller. I have figured out a way to get access to this but it's very much a hack. In my controller I can do this:
App.ActivitiesByDateRoute = Ember.Route.extend({
model: function() {
var params = this.router.location.location.hash.split('/');
// note: location hash is api/activities/:user_id/:on_date
return App.Activity.find({id:params[2], on_date: params[3]});
},
});
While I'm happy this works, it's clearly not a good solution. Any pointers to achieving what must be a pretty common use-case would be greatly appreciated.
There is a feature to retrieve directly params on dynamic models.
App.ActivitiesByDateRoute = Ember.Route.extend({
model: function(params) {
return App.Activity.find({params.user_id, params.on_date});
}
});
It should work.
ref : http://emberjs.com/guides/routing/specifying-a-routes-model/#toc_dynamic-models
Related
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'})
I have these routes defined:
this.resource('projects', function() {
this.resource('project', { path: ':project_id'}, function() {
this.route('details');
this.route('members');
});
});
What I thought was that by convention project.details route would look for "project/details" template. It does but strangely it does not get the correct model. See http://jsbin.com/ELaxigE/19/edit
Now instead of providing "project/details" template if I create "project" template then it works. See http://jsbin.com/ELaxigE/21/edit
I am confused what is happening. Can someone explain?
This has nothing to do with templates. You haven't defined the model for the ProjectDetails route. You can do so like this:
App.ProjectDetailsRoute = Em.Route.extend({
model: function() {
return this.modelFor('project');
}
});
Given a route. When the model hook ins't defined, and have a dynamic segment that ends with _id:
this.route('edit', { path: ':user_id' });
This will generate a route like this:
App.EditRoute = Ember.Route.extend({
model: function(params) {
return App.User.find(params.id);
}
});
In your case the only dynamic segmented route is project, because the :project_id.
this.resource('project', { path: ':project_id'}, function() { ... });
So because details and members, are just normal routes, it doesn't have a model.
When you change the template project/details to project, the things work because:
You transition to project.details, first is transitioned to project route, since you have declared this.resource('project'...). And because it's a dynamic segmented route, the App.Project instance is returned, and the your template is rendered bound to this model.
After this, the child route project.details is transitioned, but this time, the template project.details not exist. So nothing is rendered.
I think that the solutions are the #alexspeller answer, or:
this.resource('project', function() {
this.route('details', { path: 'details/:project_id' });
this.route('members', { path: 'members/:project_id' });
});
I hope it helps.
Ember.Route.model has access to the params variable, but Ember.Route.setupController does not. This is troublesome for me, because my path has multiple dynamic segments, and I need to use all of them in my template.
Specifically, my path looks like this: /project/:project_id/task/:task_id. Note that a task can belong to many projects, not just one. Therefore we can't tell what project we're looking at just be looking at the task itself: we have to use the project ID found in the URL. Here's how I'm doing it currently:
App.TaskRoute = Ember.Route.extend({
// This works just fine:
serialize: function(model) {
return {
task_id: model.get('id'),
project_id: this.modelFor('project').get('id')
};
},
model: function(params) {
this.set('parentProjectId', params.project_id);
return App.Task.find(params.task_id);
},
setupController: function(controller, model) {
var parentProject = this.modelFor('project') ?
this.modelFor('project') :
App.Project.find(this.get('parentProjectId'));
controller.set('parentProject', parentProject);
controller.set('content', model);
}
});
Maybe I'm being paranoid, this just feels hacky. If the route was meant to have access to the parameters, then it would already have a params property attached to it. Is there a better way?
EDIT: I made some update to the code above. Also, my routes look like this:
App.Router.map(function() {
this.resource('project', { path: '/project/:project_id' });
this.resource('task', { path: 'project/:project_id/task/:task_id' });
});
You have no access to these params in the setupController hook. The model hook has access to a params object, because it is just called, when your app is entered via URL.
Your code looks quite fine, it you really know, that you want to do it this way. What does feel hacky to you about it? When looking at this code, i am asking myself why you did not split the logic of your Route into a ProjectRoute and a subordinated TaskRoute. Wouldn't that work for you?
Update: Response to your changes
Nesting resources is likely the key to success in your case:
App.Router.map(function() {
this.resource('project', { path: '/project/:project_id' }, function(){
this.resource('task', { path: '/task/:task_id' });
});
});
Since the TaskRoute is nested not you have to rename it to ProjectTaskRoute:
App.ProjectTaskRoute = Ember.Route.extend({
...
});
This should enable you to remove the parentProjectId property from the Route.
Since Ember 1.8, the Route class has a paramsFor function:
import Route from '#ember/routing/route';
export default Route.extend({
setupController(controller) {
this._super(...arguments);
const params = this.paramsFor('name.of.your.route')
}
});
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() ;)