Почему Ember выводит данные только после перезагрузки страницы?

Question

[Абдулла Мурсалов]

Здравствуйте! Прошу помочь разобраться.
Реализовал меню с категориями на нескольких страницах сайта (как по мне, очень топорным методом, если подскажите лучше - отлично):

app/router.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function () {
  this.route('index', { path: '/'});
  this.route('catalog', function () {
    this.route('category', { path: '/:category_id'});
  });

  this.route('products', function () {
    this.route('product', { path: '/:product_id'});
  });
});

export default Router;

Роуты index.js и catalog/index.js выглядят идентично:

import Ember from 'ember';

export default Ember.Route.extend({
  model () {
    return Ember.RSVP.hash({
      categories: this.store.findAll('category'),
      products: this.store.findAll('product'),
    });
  }
});

а вот роут catalog/category.js

import Ember from 'ember';

export default Ember.Route.extend({
  model (params) {
    return Ember.RSVP.hash({
      category: this.store.findRecord('category', params.category_id),
      categories: this.store.findAll('category'),
    });
  }
});

Возникает проблема(см. гифку), данные отображаются только после перезагрузки страницы.



Ember Inspector говорит, что отличается подгружаемая модель:
с
<moscow-ember@model:category::ember579:1>
на

{ categories: <DS.RecordArray:ember377>, category: <moscow-ember@model:category::ember576:1> }

В чем причина такого поведения приложения?

Answer 1

[Станислав Романов]

При клике на категорию в каталоге, в качестве модели в роут передается сама модель категории (как у вас app/router.js и написано), и стадия загрузки модели пропускается, так как модель уже есть.

Когда вы перезагружаете страницу, то модель роута грузить как ей и полагается так как это не переход по ссылке.

Потому и отличия.

Вам в link-to нужно передавать не модель категории, а его id если хотите чтобы model в роуте выполнялся всегда.

Comments

[Абдулла Мурсалов]

Отлично, все заработало, спасибо. Подскажите, какой подход к реализации меню вы считаете верным? я сделал это с помощью компонентов и загрузки данных в каждом роуте, но это кажется мне не слишком экономным, так как запросы к апи происходят при каждом переходе

[Станислав Романов]

Грузите категории (и другие подобные вещи) один раз в роуте application, и подтягивайте в различных местах приложения из памяти - store.peekAll('category')

[Абдулла Мурсалов]

Станислав Романов: супер, спасибо!

Answer 2

[iQQator]

Ну или в место findAll использовать query, так как первое в случае если модель уже в store повторно в сеть не лезет, ваш К.О.