Ember.js 中的自嵌套无限路由

我想用 Ember.js 制作一种目录结构。

以下是 url 的示例：folder/1/folder/44/document/3

正如您所看到的，一个文件夹中可以包含多个文件夹，但也可以包含文档。我想知道我应该如何在路由器中处理类似的事情，因为事先我的应用程序不知道文件夹内是否有其他文件夹或只有文档。

我想我需要制作单独的路线而不是嵌套的路线：

App.Router.map(function() {
  this.route('folder', {path: 'folder/:folder_id'}); // -> FolderRoute
  this.route('document', {path: 'document/:document_id'}); // -> DocumentRoute
});

当文件夹或文档具有父文件夹时，父文件夹的 ID 将从后端以数组形式给出。

让我们以我的示例网址为例。最深的嵌套模型是 id 为 3 的文档。该文档模型的folder_id为44，文件夹44的parent_folder_ids为[1]。不知何故，我的路由器需要知道它必须从中生成示例 url。

我已经看到可以使用 router.generate 生成 url，但我不确定这是否是我需要的，或者 queryParams 是否是最佳解决方案。

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

（@MikeGrassotti 给了我这个灵感，因为他说他认为这是可以做到的（here https://stackoverflow.com/questions/17048372/ember-js-nested-folder-like-route-contain-slash），所以我开始挖掘。 :))

为此，您需要使用星形段而不是动态段。基本上，您指定一个*在你的路径上，路由器知道会期待“任何东西”，包括斜杠，这是常规动态段不允许的，根据文档（here https://github.com/tildeio/route-recognizer):

动态段匹配除 / 之外的任何字符。

因此我们可以如下定义路由器：

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

The document路线嵌套在folder路线并具有定期动态段。这folder另一方面，路线定义了一个时髦的*path，基本上可以是前面的任何内容folder/.

在 - 的里面FolderRoute，我们需要通过获取路径的最后一部分（不包括斜杠）来隔离文件夹 ID，然后查找子文件夹和/或文档，如下所示：

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;
  }
});

我们还需要记住最近的路径，因为我们需要使用它来访问子文件夹。

我们过渡到路线将如下所示：

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

查看工作演示here http://emberjs.jsbin.com/zubusa/1/edit?html,js,output