Ember JS-Übergang zu verschachtelten Routen, bei denen alle Routen dynamische Segmente aus einer Ansicht sind

Question

Wir schreiben eine Anwendung mit EmberJS. Wir sind jedoch immer noch neu in diesem Rahmen und es fällt uns schwer, etwas von dem zu lösen, was einfach zu sein scheint.

Das Modell ist ziemlich einfach, es gibt 3 Modelle: Warteschlange, Aufgabe und Bild. Wir verwenden dynamische URI-Segmente für alle Routen und Routen für diese Modelle sind verschachtelt in der Form: : queue_id /: task_id /: image_id.

Die Routen sind auf diese Weise konfiguriert:

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

Und irgendwo im HTML, haben wir diese einfache Vorlage durch alle Bilder von einer Aufgabe iterieren:

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

Und hier ist die Code für die Miniaturansicht:

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

Endlich ist hier unser 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); 
    } 
}); 

Das Problem: Der Aufruf von this.get('controller.target.router').transitionTo() scheint zu funktionieren. Ich kann sehen, dass sich die URL ändert, wenn ich auf eine der Miniaturansichten klicke (z. B. von/1/1/2 in etwas wie/1/1/3). Ich sehe jedoch keine Statusänderung in der Benutzeroberfläche. Auch die Linie, in die ich einen Haltepunkt gesetzt habe, scheint nicht ausgelöst zu sein. Aber wenn ich die Seite aktualisiere, funktioniert es gut.

Ist etwas mit meinem Übergangscode falsch?

Danke.

Answer 1

Zwei Dinge zu beachten:

Zuerst statt

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

Verwendung:

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

Dies könnte nicht das Verhalten ändern, aber es ist mehr Ember idiomatischen.

Die zweite Sache ist folgende:

Interne Übergänge werden die model Haken auf der Strecke nicht auslösen, weil Ember vorausgesetzt, dass Sie das Modell sind vorbei zusammen mit dem Übergang, so dass keine Notwendigkeit, da Sie die model Haken anrufen bereits das Modell bestanden.

Aus diesem Grund wird Ihr Haltepunkt nicht ausgelöst, der find wird nicht aufgerufen (wie es nicht sollte).

Ich habe nicht genug Informationen, um Ihr Problem zu finden, aber wenn ich von der Tatsache rate, dass eine Seitenaktualisierung funktioniert und ein interner Übergang nicht besteht, besteht eine Inkonsistenz zwischen den Objekten, die an transitionTo und zwischen übergeben werden was von dem model Haken zurückgegeben wird.

Sie sollten das genaue Objekt an transitionTo übergeben als diejenigen, die von der model Hook zurückgegeben wurden.

Wenn Sie tun:

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

und es funktioniert nicht, ist wahrscheinlich etwas falsch mit entweder queue, task oder image Modelle Sie sind vorbei.

So folgt aus:

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

ist nicht sehr hilfreich, weil es sein könnte, wo das Problem ist.