Przejście Ember JS do tras zagnieżdżonych, w których wszystkie trasy są segmentami dynamicznymi z widoku

Question

Piszemy aplikację za pomocą EmberJS. Jednak wciąż jesteśmy nowi z tymi ramami i ciężko jest rozwiązać niektóre z tego, co może wydawać się proste.

Model jest dość prosty, istnieją 3 modele: kolejka, zadanie i obraz. Używamy dynamicznych segmentów URI dla wszystkich tras i tras, ponieważ modele te są zagnieżdżone w formie: : queue_id /: task_id /: image_id.

Trasy są skonfigurowane w ten sposób:

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

i gdzieś w kodzie HTML, mamy ten prosty szablon iterację wszystkich obrazów z zadania:

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

A oto kod do widoku miniatur:

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

Wreszcie, oto nasze 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); 
    } 
}); 

Problem: Wezwanie do this.get('controller.target.router').transitionTo() wydaje się działać. Widzę, że po kliknięciu w jeden z widoków miniatur zmienia się adres URL (np. Z/1/1/2 na coś takiego jak/1/1/3). Jednak nie widzę żadnej zmiany stanu w interfejsie użytkownika. Również linia, w której umieściłem punkt przerwania, nie wydaje się być uruchamiana. Ale kiedy odświeżam stronę, działa dobrze.

Czy jest coś nie tak z moim kodem przejściowym?

Dzięki.

Answer 1

Dwie rzeczy do uwaga:

Po pierwsze, zamiast

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

użytkowania:

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

To nie może zmienić zachowanie, ale to bardziej Ember idiomatyczne.

Druga sprawa jest następująca:

przejścia wewnętrzne nie wywoła hak model na trasie, ponieważ Ember zakłada jesteś przejazdem modelu wraz z przejściem, więc nie ma potrzeby, aby zadzwonić do haka model od ciebie już przeszedł model.

Z tego powodu punkt przerwania nie zostanie wywołany, find nie zostanie wywołany (tak jak nie powinien).

Nie mam wystarczających informacji, aby znaleźć twój problem, ale gdybym miał zgadywać, że odświeżanie strony działa, a wewnętrzne przejście nie jest takie, że istnieje niezgodność między obiektami przekazanymi do transitionTo i między co jest zwracane z haka model.

Należy przekazać dokładny obiekt do transitionTo jako taki, który zostałby zwrócony przez hak model.

Jeśli robisz:

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

i to nie działa, to prawdopodobnie coś złego albo queue, task lub image modeli jesteś przejazdem.

Więc tak:

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

nie jest bardzo pomocne, ponieważ może to być tam, gdzie jest problem.