ember.js - 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 将从后端以数组的形式给出。

让我们以我的示例 url 为例。最深的嵌套模型是 id 为 3 的文档。此文档模型的 folder_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)，这是常规动态段不允许的:

A dynamic segment matches any character but /.

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

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