I would like to make a sort of directory structure with Ember.js.
Here is an example of how an url can look like: folder/1/folder/44/document/3
As you can see a folder can have multiple folders inside but also documents. I'm wondering how I should handle something like this in my router because beforehand my application doesn't know if a folder has other folders inside or only documents.
I think I need to make separated routes instead of nested routes:
App.Router.map(function() {
this.route('folder', {path: 'folder/:folder_id'}); // -> FolderRoute
this.route('document', {path: 'document/:document_id'}); // -> DocumentRoute
});
When a folder or document has parent folders the id's of the parent folders will be given in an array from the backend.
Let's take my example url. The deepest nested model is a document with id: 3. This document model has folder_id: 44 and folder 44 has parent_folder_ids: [1]. Somehow my router needs to know that it has to generate the example url from it.
I've seen it's possible to use router.generate to generate urls but I'm not sure if that's wat I need or if queryParams will be the best solution.
(@MikeGrassotti gave me the inspiration for this one since he said that he thinks it could be done (here), so I started digging. :))
For this to work, you will need to use a star segment instead of a dynamic segment. Basically, you specify a
*
on your path and the router knows to expect "anything", including slashes, which a regular dynamic segment does not allow, as per documentation (here):We therefore can define the router as follows:
The
document
route is nested inside thefolder
route and has a regular dynamic segment. Thefolder
route on the other hand, defines a funky*path
, which basically can be anything preceded byfolder/
.Inside the
FolderRoute
, we will need to isolate the folder id by taking the last part of the path (not including the slash) and then looking up the children folders and/or documents as follows:We will also need to remember the most recent path, since we will need to use it to get to the child folder.
Our transitioning into the route will look something like this:
See the working demo here