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

Мы пишем приложение с использованием 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}}

И вот код для Thumbnail View:

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). Однако я не вижу изменений в пользовательском интерфейсе. Кроме того, строка, в которой я помещаю точку останова, кажется, не срабатывает. Но когда я обновляю страницу, она работает хорошо.

Что-то не так с моим кодом перехода?

Спасибо.

Ответы

Ответ 1

Следует отметить две вещи:

Сначала вместо

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

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

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

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

Во-вторых, следующее:

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

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

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

Вы должны передать точный объект в 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;

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