Self nested infinite routes in Ember.js

问题

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)

回答1:

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

来源：https://stackoverflow.com/questions/28048059/self-nested-infinite-routes-in-ember-js