Skip to content

Instantly share code, notes, and snippets.

@tpitale
Created December 9, 2013 17:36
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tpitale/7876501 to your computer and use it in GitHub Desktop.
Save tpitale/7876501 to your computer and use it in GitHub Desktop.
Notes on "complex" nested routes/urls/views in Ember
In order to to add a new task for Problem 3 in the UI above, I'm hoping for a route that's something like `/problems/3/tasks/new`. This style is, of course, very much like what Rails uses.
Below is a cut down version of the router setup I'm using to to try to accomplish this URL structure. It seems strange to have a resource "problem" inside of a resource "problems", but the edit for that problem is ouside the individual problem, but inside of problems (plural).
Either way, all of this is structured in such a way as to give me the UI above, and the URL I'd like to use. To couple the UI and the URL together feels like it makes things very brittle in the router, and makes me fight against Embers' conventions.
App.Router.map(function() {
this.resource('problems', function() {
// ProblemsNewRoute
this.route('new');
// ProblemsEditRoute
this.route('edit', {path: '/:problem_id/edit'});
// Show
this.resource('problem', {path: '/:problem_id'}, function() {
this.resource('tasks', function() {
// TasksNewRoute tasks/new
this.route('new');
})
});
});
});
+--------------------------------------------------------------------------------------------------+
|+--------------------------------------------------------++--------------------------------------+|
||+------------------------------------------------------+||+------------------------------------+||
||| |||| |||
||| Problem 1 |||| Problem 3 Details |||
||| |||| |||
||+------------------------------------------------------+||| |||
||+------------------------------------------------------+||| |||
||| |||| |||
||| Problem 2 |||| |||
||| |||| |||
||+------------------------------------------------------+||+------------------------------------+||
||+------------------------------------------------------+||+------------------------------------+||
||| |||| Task 1 |||
||| Problem 3 |||| |||
||| |||+------------------------------------+||
||+------------------------------------------------------+||+------------------------------------+||
||+------------------------------------------------------+||| Task 2 |||
||| |||| |||
||| Problem 4 |||+------------------------------------+||
||| |||+------------------------------------+||
||+------------------------------------------------------+||| |||
||+------------------------------------------------------+||| New Task Form |||
||| |||| |||
||| Problem 5 |||| |||
||| |||| |||
||| |||| |||
||+------------------------------------------------------+||+------------------------------------+||
|+--------------------------------------------------------++--------------------------------------+|
+--------------------------------------------------------------------------------------------------+
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment