Ember JS переход на вложенные маршруты, где все маршруты являются динамическими сегментами из вида

Question

Мы пишем приложение с использованием EmberJS. Однако мы все еще новы с этой структурой, и нам трудно решить некоторые из того, что может показаться прямым.

Модель довольно проста, есть 3 модели: очередь, задача и изображение. Мы используем динамические сегменты URI для всех маршрутов, и маршруты для этих моделей вложены в форму: : queue_id /: task_id /: image_id.

Маршруты настроены таким образом:

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

И где-то в HTML, мы имеем этот простой шаблон для перебора всех изображений из задачи:

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

И вот код для эскизов:

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

Наконец, вот наш 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); 
    } 
}); 

Проблема: Вызов this.get('controller.target.router').transitionTo(), кажется, работает. Я вижу, что когда я нажимаю один из изображений эскизов, URL изменяется (например, от/1/1/2 до чего-то вроде/1/1/3). Однако я не вижу изменений в пользовательском интерфейсе. Кроме того, строка, в которой я помещаю точку останова, кажется, не срабатывает. Но когда я обновляю страницу, она работает хорошо.

Есть что-то не так с моим кодом перехода?

Спасибо.

Answer 1

Две вещи, чтобы отметить:

Во-первых, вместо

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

Использование:

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

Это не может изменить поведение, но это более Ember идиоматическое.

Вторая вещь заключается в следующем:

Внутренних переходы не вызовут model крюка на пути, потому что Эмбер не предполагает, что вы передаете модель вместе с переходом, поэтому нет необходимости называть model крюк, поскольку вы уже прошла модель.

Вот почему ваша точка останова не срабатывает, find не вызывается (как и не должно).

У меня недостаточно информации, чтобы найти вашу проблему, но если бы я мог угадать из-за того, что обновление страницы работает и внутренний переход не означает, что существует несоответствие между объектами, переданными в transitionTo, и между ними что возвращается с крюка model.

Вы должны передать точный объект transitionTo как те, которые были бы возвращены крюком model.

Если вы делаете:

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

и это не работает, то, вероятно, неправильно либо с queue, task или image модели вы проходящими.

Так что:

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

не очень полезно, потому что это может быть там, где проблема.