Self nested infinite routes in Ember.js

Question

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.

(https://github.com/tildeio/router.js#generating-urls)

Do you need to have the url structured like that? You could recursively go through your folders until you find the one you want inside your route file. So your url would just be `folder/44/document/3` or even just `document/3` if you always know the highest parent. — rogMaHall, Jan 20 '15 at 18:00
I agree with @rogMaHall. Futhermore restricting to 1 level makes things much cleaner. Also see http://weblog.jamisbuck.org/2007/2/5/nesting-resources. Btw, I would fetch the parent resources recursively instead of returning them all at once in an array. — Thomas Brus, Jan 21 '15 at 01:53

score 4 · Accepted Answer · edited May 23 '17 at 12:24

(@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):

A dynamic segment matches any character but /.

We therefore can define the router as follows:

App.Router.map(function() {
  this.route('folder', {path: 'folder/*path'}, function(){
    this.route('document', {path: 'document/:document_id'});    
  });  
});

The document route is nested inside the folder route and has a regular dynamic segment. The folder route on the other hand, defines a funky *path, which basically can be anything preceded by folder/.

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:

App.FolderRoute = Ember.Route.extend({
  model: function(params){
    var lastSlash = params.path.lastIndexOf('/');
    var folder_id = params.path.substr(lastSlash + 1);
    var folder = App.FILE_STRUCTURE.findBy('folder_id', folder_id);    

    Ember.set(folder, 'currentPath', params.path);

    return folder;
  }
});

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:

var newPath = this.get('currentPath') + "/folder/" + folder;
this.transitionToRoute('folder', newPath);

See the working demo here

Wow this is exactly what I was looking for. I also found that question but wasn't sure how to completely work it out. So thanks! This helps me a lot :) — Alvin Vogelzang, Jan 21 '15 at 09:17

Self nested infinite routes in Ember.js

1 Answers1

Linked