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");
});
});
});
Related
in my router i have
this.route('users', { path: '/users' }, function(){
this.route('show', { path: '/:user_id' }, function(){
this.route('history',{ path: '/history' });
});});
in my template i want to link to the users/1/history url
but {{#link-to "users.show.history" user}}History{{/link-to}}
is not working.
So what is the correct way to write this link to?
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 try to build an webapp with emberjs. this is the app router:
App.Router.map(function() {
this.route("page");
this.route("menu");
this.resource('posts', function(){
this.resource('post', { path: '/:post_id' });
});
this.route("index", { path: "/" });
this.route("cat");
this.route("foto");
});
and this is the Postroute:
// GET POST JSON
App.PostRoute = Ember.Route.extend({
model: function(params) {
return Ember.$.getJSON('http://www.wilhelminaschool.eu/?json=get_post&post_id='+params.post_id);
}
});
but i get an route not found error for the post, the posts list works. What i am doing wrong?
error:
Error: Assertion Failed: The route post/11330 was not found
live on:
http://www.wilhelminaschool.eu/app2/#posts
http://www.wilhelminaschool.eu/app2/#post/11330
Each one of the posts links to app2/#post/:post_id i.e. app2/#post/11330 , but since the post resource has been defined within the resource of posts with a path of /:post_id the links should be app2/#/posts/:post_id i.e. app2/#/posts/11330
example,
http://emberjs.jsbin.com/budeyaja/1/edit
http://emberjs.jsbin.com/budeyaja/1 (please observe the urls while navigating)
If you need the links to work as they are then the routes will have to be specified as ,
this.resource("posts");
this.resource("post", {path:"/post/:post_id"});
http://emberjs.jsbin.com/qaquzusi/1/edit
Do not nest the post resource inside posts, use:
this.resource('posts');
this.resource('post', { path: '/post/:post_id' });
Ember Routing Guide provides a clear explanation of different cases.
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() };
}
} );