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
Related
How to define nested routes in ember routable engine? I can't navigate to beyond 2 trees. Like,
For example
All posts
Post
Comments
Comment
I can access
localhost:4200/posts/:postid/
But when I access
localhost:4200/posts/:postid/comments/:commentid
Its not rendering the content for comments template. But it doesn't show any error either.
In your terminal
$ ember g route posts
$ ember g route posts/post
$ ember g route posts/post/comments
$ ember g route posts/post/comments/comment
In your router.js, replace the contents by the following
Router.map(function(){
this.route('posts', function() {
this.route('post', {path: '/:post_id' }, function() {
this.route('comments', function() {
this.route('comment', {path: '/:comment_id'});
});
});
});
});
This is a solution, But what I prefer is , define an index sub-route in every main routes, for example ember g route posts/index and add it into your router.js like
this.route('posts', function() {
this.route('index', {path: '/'});
this.route('post', {path: '/:post_id'}, function() {
.....
.....
});
});
add an index sub route every time
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...
}
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
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'})
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");
});
});
});