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)，所以我开始挖掘。:))

为此，您需要使用星形细分而不是动态细分。基本上，你在你的路径上指定了一个 * 并且路由器知道期望 "anything"，包括斜杠，根据文档（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，然后按如下方式查找子文件夹 and/or 文档:

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

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

Self nested infinite routes in Ember.js

nested

nested-routes

ember.js

ember-cli