Rutas infinitas autoenlazadas en Ember.js

nested ember-cli

Question

Me gustaría crear una especie de estructura de directorios con Ember.js.

Aquí hay un ejemplo de cómo puede ser una url: folder/1/folder/44/document/3

Como puede ver, una carpeta puede tener varias carpetas adentro pero también documentos. Me pregunto cómo debo manejar algo como esto en mi enrutador porque de antemano mi aplicación no sabe si una carpeta tiene otras carpetas dentro o solo documentos.

Creo que necesito hacer rutas separadas en lugar de rutas anidadas:

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

Cuando una carpeta o documento tiene carpetas principales, los identificadores de las carpetas principales se mostrarán en una matriz desde el servidor.

Tomemos mi ejemplo de url. El modelo anidado más profundo es un documento con id: 3. Este modelo de documento tiene folder_id: 44 y la carpeta 44 tiene parent_folder_ids: [1]. De alguna manera, mi enrutador necesita saber que tiene que generar el url de ejemplo a partir de él.

He visto que es posible usar enrutador.generar para generar URL, pero no estoy seguro si eso es lo que necesito o si queryParams será la mejor solución.

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

Answer 1

(@MikeGrassotti me dio la inspiración para este, ya que dijo que cree que podría hacerse ( aquí ), así que empecé a cavar. :))

Para que esto funcione, necesitará usar un segmento de estrella en lugar de un segmento dinámico. Básicamente, especifica un * en su ruta y el enrutador sabe que se espera "cualquier cosa", incluidas las barras diagonales, que un segmento dinámico normal no permite, según la documentación ( aquí ):

Un segmento dinámico coincide con cualquier carácter pero /.

Por lo tanto, podemos definir el enrutador de la siguiente manera:

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

La ruta del document está anidada dentro de la ruta de la folder y tiene un segmento dinámico regular. La ruta de la folder , por otro lado, define una *path funky *path , que básicamente puede ser cualquier cosa precedida por la folder/ .

Dentro de FolderRoute , necesitaremos aislar la identificación de la carpeta tomando la última parte de la ruta (sin incluir la barra) y luego buscar las carpetas y / o documentos secundarios de la siguiente manera:

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

También necesitaremos recordar la ruta más reciente, ya que tendremos que usarla para acceder a la carpeta secundaria.

Nuestra transición a la ruta se verá más o menos así:

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

Vea la demostración de trabajo aquí