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.
Related
Here is my problem,
assume I am having an ember app with following ember route configuration:
Router.map(function() {
this.route('todos', function() {
this.route('new');
this.route('view', {
path: "/:id"
});
});
this.route('articles', function() {
this.route('view', {
path: "/:id"
});
this.route('new');
});
});
Now i want to add the add the prefix for each route based on some user information i would be fetching.
For eg:
Below are the two user information
dev = {
id: 1,
workspace: 'DEV'
}
qa = {
id: 2,
workspace:'TEST'
}
once the dev is landing in the app, route must be like:
todos:
/DEV/todos/new
and same for the other users.
once the qa is landing in the page, route must be like:
/TEST/todos/new
to solve this i know we generate the parent route and add all the other route as child, need to change the file structure for this case.
Here is Ember :
ember-cli: 2.13.3,
ember-data: 2.18.5
This is straight forward in Ember.js using the router's path as URL paths can be customized easily.
For your case, the todos route should have a dynamic segment (say, workplace) and hence, the router entry will be like:
Router.map(function() {
this.route('todos', { path: '/:workplace/todos' }, function() {
this.route('new');
...
});
});
And if you are transitioning to new todo page using this.transitionTo('todos.new', 'TEST'), then URL will be updated as TEST/todos/new.
This twiddle has a tiny demo. Hope that helps :)
I'm just starting with Ember JS and Ember CLI and trying to figure out this routing issue. I have a group model that has many game models. With the following route, I am able to display games just fine from a group URL:
Router.map(function() {
this.resource("groups", function() {
this.route('show', {path: ':group_id/show' });
});
});
This results in a URL with the form:
http://localhost:4200/groups/1/show
Suppose one of the group names is "wizards". I'd like to to be able to construct a URL in the following form and render all the games that belong to "wizards":
http://localhost:4200/wizards
Any tips are appreciated.
Like #blessenm points out in the comments, your router would change from
Router.map(function() {
this.resource("groups", function() {
this.route('show', {path: ':group_id/show' });
});
});
to
Router.map(function() {
this.resource("group", { path: ':group_name'});
});
The second parameter to this.resource() or this.route() is optional. If you don't pass anything in - it assumes the same name as your route/resource (groups, in your case). If you pass in an object that has a path: key - you are specifying what the url to the route is, including a dynamic segment. See here for Ember documentation on this.
I have a need for deep nesting some routes in ember, I have something like this.
this.resource('wizards', {
path: '/wizards'
}, function() {
this.resource('wizards.google', {
path: '/google'
}, function() {
this.resource('wizards.google.register', {
path: '/register'
}, function() {
this.route('step1');
this.route('step2');
this.route('step3');
this.route('summary');
});
});
});
What I was expecting was as structure like this:
url /wizards/google/register/step1
route name wizards.google.register.step1
route Wizards.Google.Register.Step1Route
Controller Wizards.Google.Register.Step1Controller
template wizards/google/register/step1
but I got this:
url /wizards/google/register/step1 //as expected
route name wizards.google.register.step1 //as expected
route WizardsGoogle.Register.Step1Route
Controller WizardsGoogle.Register.Step1Controller
template wizards/google.register.step1
What I don't get is when does ember stop using capitalization (WizardsGoogle) and start using namespaces (WizardsGoogle.Register). The seemingly inconsistency confuses me. I would have expected either of them.
I met the same things with deep nested resources. Although I didn't know how this happens, what I can tell is that you can always use CapitalizedNestedRoute without namespace, and Ember can recognize it. Although in Ember Inspector it displays "WizardsGoogle.Register.Step1Route".
In your example I defined such route:
App = Em.Application.create();
App.Router.map(function() {
this.resource('wizards', function() {
this.resource('wizards.google', function() {
this.resource('wizards.google.register', function() {
this.route('step1');
this.route('step2');
this.route('step3');
});
});
});
});
App.IndexRoute = Em.Route.extend({
beforeModel: function() {
// Transition to step1 route
this.transitionTo('wizards.google.register.step1');
}
});
App.WizardsGoogleRegisterStep1Route = Em.Route.extend({
model: function() {
// You can see this alert when you enter index page.
alert('a');
}
});
In this example the app will transition to WizardsGoogleRegisterStep1Route with no problem. And if you use container to find route like this:
App.__container__.lookup('route:wizards.google.register.step1').constructor
It will also display App.WizardsGoogleRegisterStep1Route. It's the same as Ember Guide describes. http://emberjs.com/guides/routing/defining-your-routes/#toc_nested-resources And Ember Guide doesn't introduce namespace route.
So I think it's better to according to what Ember Guide suggests (always use CapitalizedNestedRoute). And in my opinion it's easier to define CapitalizedNestedRoute than nested.namespace.route.
Finally, if you really want to use namespace route/controller/template, you can have a look at Ember.DefaultResolver. Check the API to learn how to extend it so container can lookup modules by your own rules.
Routes are "namespaced" inside resources. And resources uses what you call capitalization, where they sort of define a namespace (for routes to use).
So this set of routes:
App.Router.map(function() {
this.resource('posts', function() {
this.route('new');
this.route('old');
this.route('edit');
this.route('whatever');
});
});
Would result in routes with the following name:
PostsRoute
PostsNewRoute
PostsOldRoute
PostsEditRoute
PostsWhateverRoute
Whereas, the following set of routes:
App.Router.map(function() {
this.resource('posts', function() {
this.resource('photos');
this.resource('comments');
this.resource('likes');
this.resource('teets');
});
});
Would result in route with the following names:
PostsRoute
PhotosRoute
CommentsRoute
LikesRoute
TeetsRoute
Also note, that resources within resources don't get "namespaced" to the "parent" resource, so you'll always ever have the form:
{CapitalizedResourceName}Route // for resources
{CapitalizedParentResourceName}{RouteName}Route // for routes
I hope this helps you!
I have a route that catches all missing routes and renders a 404-style page. I would like to create a route that matches any url starts with "/browse/" such as "/browse/shoes/red". This seems like the correct way to do that:
App.Router.map(function() {
this.route('browse', { path: '/browse/*fields' });
this.route('missing', { path: '/*badPath' });
});
However, ember's RouteRecognizer always picks the missing route over the browse route. (The logic that does this is in sortSolutions of route-recognizer.js .) Is this a bug in Ember? Is there a right way to use glob routes and still have a 404 handler?
By the way, I can create a resource for browse instead of making it a route like this:
App.Router.map(function() {
this.resource('browse', { path: '/browse' }, function() {
this.route('baz', {path: '/*'});
});
this.route('missing', { path: '*' });
});
This still has the same problem.
I think this must be a bug...
Here's a JSBin : http://jsbin.com/ucanam/1403/edit
Here you can see it going directly to the 'missing' route as expected:
http://jsbin.com/ucanam/1403#/some/random/stuff
And a failed attempt at going directly to a 'browse' route :
http://jsbin.com/ucanam/1403#/browse/test/stuff
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 };
}
});