Ember.js中的自嵌套无限路由 [英] Self nested infinite routes in Ember.js

问题描述

我想用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]。不知怎的，我的路由器需要知道它必须从它生成示例url。

我看到可以使用router.generate来生成URL，但我不知道如果这是我需要，或者如果queryParams将是最好的解决方案。

（ https：// github .com / tildeio / router.js＃generate-urls ）

解决方案

（@ MikeGrassotti给了我灵感这一个，因为他说他认为可以做到这一点（这里

为了使这个工作，您需要使用星形细分而不是动态细分。基本上，您在路径上指定了一个 * ，路由器知道根据文档（ here ）：

动态段匹配任何字符，但/.

因此，我们可以按如下方式定义路由器：

  App.Router.map（function（）{
 this.route（'folder'，{path：'folder / * path'} ，function（）{
 this.route（'document'，{path：'document /：document_id'}）; 
}）; 
}）; 
  

文档路由嵌套在文件夹路由并具有常规动态段。另一方面，文件夹路线定义了一个时髦的 *路径，基本上可以是 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 /+文件夹; 
 this.transitionToRoute（'folder'，newPath）; 
  

请参阅工作演示 here

I would like to make a sort of directory structure with Ember.js.

Here is an example of how an url can look like: folder/1/folder/44/document/3

As you can see a folder can have multiple folders inside but also documents. I'm wondering how I should handle something like this in my router because beforehand my application doesn't know if a folder has other folders inside or only documents.

I think I need to make separated routes instead of nested routes:

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

When a folder or document has parent folders the id's of the parent folders will be given in an array from the backend.

Let's take my example url. The deepest nested model is a document with id: 3. This document model has folder_id: 44 and folder 44 has parent_folder_ids: [1]. Somehow my router needs to know that it has to generate the example url from it.

I've seen it's possible to use router.generate to generate urls but I'm not sure if that's wat I need or if queryParams will be the best solution.

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

解决方案

(@MikeGrassotti gave me the inspiration for this one since he said that he thinks it could be done (here), so I started digging. :))

For this to work, you will need to use a star segment instead of a dynamic segment. Basically, you specify a * on your path and the router knows to expect "anything", including slashes, which a regular dynamic segment does not allow, as per documentation (here):

A dynamic segment matches any character but /.

We therefore can define the router as follows:

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

The document route is nested inside the folder route and has a regular dynamic segment. The folder route on the other hand, defines a funky *path, which basically can be anything preceded by folder/.

Inside the FolderRoute, we will need to isolate the folder id by taking the last part of the path (not including the slash) and then looking up the children folders and/or documents as follows:

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

We will also need to remember the most recent path, since we will need to use it to get to the child folder.

Our transitioning into the route will look something like this:

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

See the working demo here

这篇关于Ember.js中的自嵌套无限路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！