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

Question

我想用 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 的文档。此文档模型的文件夹 ID 为 44，文件夹 44 的 parent_folder_ids 为 [1]。不知何故，我的路由器需要知道它必须从中生成示例 url。

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

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

Answer 1

（@MikeGrassotti 给了我这个灵感，因为他说他认为可以做到（here），所以我开始挖掘。:)）

为此，您需要使用星形细分而不是动态细分。基本上，您在路径上指定 * 并且路由器知道根据文档 (here) 会期待“任何东西”，包括常规动态段不允许的斜线：

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

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

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

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