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

时间:2015-01-20 14:40:20

标签: ember.js nested ember-cli nested-routes

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

以下是网址的示例: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]。不知怎的,我的路由器需要知道它必须从中生成示例网址。

我已经看到可以使用router.generate来生成网址,但我不确定我是否需要这个wat,或者queryParams是否是最佳解决方案。

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

1 个答案:

答案 0 :(得分:4)

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