javascript - route - Ember JS transición a rutas anidadas donde todas las rutas son segmentos dinámicos desde una vista

ember js deployment

Question

Estamos escribiendo una aplicación usando EmberJS. Sin embargo, todavía somos nuevos en este marco y estamos teniendo dificultades para resolver algo de lo que puede parecer sencillo.

El modelo es bastante simple, hay 3 modelos: cola, tarea e imagen. Estamos utilizando segmentos de URI dinámicos para todas las rutas y rutas para que estos modelos estén anidados en la forma :: queue_id /: task_id /: image_id.

Las rutas están configuradas de esta manera:

App.Router.map(function() {
   this.resource(''queue'', {path: '':queue_id''}, function() {
      this.resource(''task'', {path: '':task_id''}, function() {
         this.resource(''image'', {path: '':image_id''});
      });
   });
}

Y en algún lugar del HTML, tenemos esta plantilla simple para iterar a través de todas las imágenes de una tarea:

{{#each task.images}}
   <li>
      {{#view App.ThumbnailView.contentBinding="this"}}
         <img {{bindAttr src="thumbnail.url"}} />
      {{/view}}
   </li>
{{/each}}

Y aquí está el código para la Vista en miniatura:

App.ThumbnailView = Ember.View.extend({
   tagName : ''a'',
   click : function(e) {
       var task = //assume this value exists;
       var queue = //assume this value exists;
       var image = //assume this value exists;

       this.get(''controller.target.router'').transitionTo(''image'', queue, task, image);
   }
});

Finalmente, aquí está nuestro ImageRoute:

App.Image = Ember.Object.extend();
App.Image.reopenClass({
    find : function(image_id) {
       //This is where I set a breakpoint
       console.log(image_id);
    }
});

App.ImageRoute = Ember.Route.extend({
    model : function(params) {
      //image_id is the last uri segment in: #/1/1/1
      return App.Image.find(params.image_id);
    }
});

El problema: la llamada a this.get(''controller.target.router'').transitionTo() parece estar funcionando. Puedo ver que cuando hago clic en una vista de las miniaturas, la URL cambia (por ejemplo, de / 1/1/2 a algo así como / 1/1/3). Sin embargo, no veo ningún cambio de estado en la IU. Además, la línea donde puse un punto de interrupción no parece activarse. Pero cuando actualizo la página, funciona bien.

¿Hay algún problema con mi código de transición?

Gracias.

Answer 1

Dos cosas a tener en cuenta:

Primero, en lugar de

this.get(''controller.target.router'').transitionTo(''image'', queue, task, image);

Utilizar:

this.get(''controller'').transitionToRoute(''image.index'', queue, task, image);

Esto puede no cambiar el comportamiento, pero es más Ember idiomático.

Lo segundo es lo siguiente:

Las transiciones internas no desencadenarán el enganche del model en la ruta, porque Ember asume que está pasando el modelo junto con la transición, por lo que no es necesario llamar al enganche del model ya que ya pasó el modelo.

Es por eso que su punto de interrupción no se activa, el find no se llama (como no debería).

No tengo suficiente información para encontrar su problema, pero si tuviera que adivinar por el hecho de que una actualización de página funciona y una transición interna no es así, hay una incoherencia entre los objetos pasados ​​a transitionTo y entre lo que se devuelve el gancho model .

Debería pasar el objeto exacto a transitionTo como aquellos que hubieran sido devueltos por el gancho model .

Si estás haciendo:

this.get(''controller'').transitionToRoute(''image.index'', queue, task, image);

y no está funcionando, es probable que algo esté mal con la queue , la task o los modelos de image que está pasando.

Así que esto:

   var task = //assume this value exists;
   var queue = //assume this value exists;
   var image = //assume this value exists;

no es muy útil porque podría ser donde está el problema.