How can I create a route to support nested URL having format "/objects/1/fields/1".
I was able to achieve this with the following code but it violates the pod structure of my code.
this.route('fieldShow', {path: '/objects/:object_id/fields/:field_Id'});
I ended up solving this by passing the path like this:
this.route('fields', {path: 'objects/:object_id/fields'}, function() {
this.route('show', {path: '/:field_id'});
});
You try this:
Router.map(function() {
this.route('fieldshow', function() {
this.route('edit');
this.route('object', { path: ':object_id' }, function() {
this.route('field', { path: ':field_id' });
});
});
});
this probably helps you. you may ignore this.route('edit'); this is just to show you how it works
Related
I am getting this error:
Assertion Failed: You attempted to define a `{{link-to "companies.show"}}` but did not pass the parameters required for generating its dynamic segments. There is no route named companies.show
But I do have that route in router.js and is was working before I added two new routes along with a component for editing/adding records. But it is indeed gone right now - I can nav directly to it either. So I think I have an error in a different part of my that is dominoing into my route.
// router.js
Router.map(function() {
this.route('states');
this.route('companyTypes');
this.route('companies', function() {
this.route('show', {path: '/:company_id'});
this.route('new');
this.route('edit', {path: '/:company_id'});
});
this.route('counties', {path : '/counties/:state'});
});
// routes/companies.js
export default Ember.Route.extend({
model() {
return this.get('store').findAll('company');
}
});
// routes/companies/show.js
export default Ember.Route.extend({
model(params) {
return this.get('store').findRecord('company', params.company_id);
}
});
I am passing the model parameter in the link-to and the show route has its model hook.
Ok, so the problem was I duplicated the same route in router.js
// router.js
this.route('companies', function() {
this.route('show', {path: '/:company_id'});
this.route('new');
this.route('edit', {path: '/:company_id'});
});
Both show and edit have the same route: If you nav to http://localhost:4200/companies/1 are you supposed to go to show or edit? edit overwrites show because it comes last. Move show after edit:
// router.js
this.route('companies', function() {
this.route('new');
this.route('edit', {path: '/:company_id'});
this.route('show', {path: '/:company_id'});
});
And show starts working, but edit will break.
So you need to do something like this:
// router.js
this.route('companies', function() {
this.route('new');
this.route('edit', {path: '/edit/:company_id'});
this.route('show', {path: '/:company_id'});
});
Your routes are now:
http://localhost:4200/companies/1
http://localhost:4200/companies/edit/1
I'm using Ember POD syntax to organize my Ember application.
Is it possible to remove the pod directory from appearing in the browser URL? If so, how?
See picture.
This is my current router.js file
Router.map(function() {
this.route('main', function() {
this.route('about');
this.route('focus', function() {
this.route('show');
});
this.route('projects', function() {
this.route('show');
});
this.route('articles', function() {
this.route('show', {path: '/:id'});
});
this.route('contact');
});
});
Thanks.
Your main route can have a path of ''.
this.route('main', { path: '' }, function() {
this.route('about');
// etc...
}
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've got a problem getting the linkTo Handlebar helper to work
I've got this route setup:
this.resource("contact", function(){
this.route('new');
this.route('show', { path: "/:contactid" });
this.route('edit', { path: "edit/:contactid" });
}
in my template I have the following code:
{{#each entry in controller.entries}}
{#linkTo "contact.show" entry href="true" }}test {{firstname}} {{lastname}}{{/linkTo}}
{{/each}}
The resulting link though is /contact/show/undefined
What am I doing wrong?
Sidenote: I'm not using Ember.Data and the models.
Ember expects that parameters follow the convention modelname_id, so the route should be changed to:
this.resource("contact", function(){
this.route('new');
this.route('show', { path: "/:contact_id" });
this.route('edit', { path: "edit/:contact_id" });
}
This should work, assuming that entry.get("id") is defined.
See http://emberjs.com/guides/routing/specifying-a-routes-model/ for detail.
Implement serialize in the router to override the default behavior of id. For example I have a route that looks like:
this.route( 'date', { path: '/:begin/:end'} );
and the route will look like
Em.Route.extend( {
serialize: function( model, params ) {
return { begin: model.begin.valueOf(), end: model.end.valueOf() };
}
} );
In ember.js pre 4 I'm trying to achieve a routing which responds to the following routes (among others):
/contact/[id]
/contact/edit
/contact/new
/contact/list
/contact/list/my
/contact/list/team
/contact/list/groups
The first routes (up to list) I can manage:
The variants of list (my/team/groups) is where I'm struggling. I just get a: "No route machted the URL '/contact/list/my' error when calling it.
I've tried multiple variations on how to achieve this kind of nesting. This is my current attempt:
App.Router.map(function()
{
this.route("index");
this.resource("contact", function(){
this.route('new');
this.route('show', { path: "/:contact_id" });
this.route('edit', { path: "edit/:contact_id" });
});
this.resource("contact.list", function(){
this.route("index");
this.route("my");
});
});
Looking at the App.Router.router.recognizer.names: I see the following output:
contact.edit: Object
contact.index: Object
contact.list.index: Object
contact.list.my: Object
contact.new: Object
contact.show: Object
index: Object
__proto__: Object
Any ideas?
This seems to work for me:
App.Router.map(function()
{
this.route("index");
this.resource("contact", function(){
this.route('new');
this.route('show', { path: "/:contact_id" });
this.route('edit', { path: "edit/:contact_id" });
this.resource("contact.list", { path: "list/" },function(){
this.route("index");
this.route("my");
});
});
});