Why does Ember display data only after page reload?

Question

Ember.js

Hello! Please help me figure it out.
Implemented a menu with categories on several pages of the site (as for me, a very clumsy method, if you tell me better - great):
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;

Routes index.jsand catalog/index.jslook identical:

import Ember from 'ember';

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

and here is the routecatalog/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'),
    });
  }
});

There is a problem (see gif), the data is displayed only after the page is reloaded.

Ember Inspector says the model being loaded is different:
from
<[email protected]:category::ember579:1>
to

{ categories: <DS.RecordArray:ember377>, category: <[email protected]:category::ember576:1> }

What is the reason for this behavior of the application?

Answer 1

When you click on a category in the catalog, the category model itself is passed as a model to the route (as you have app/router.js written), and the stage of loading the model is skipped, since the model is already there.
When you reload the page, the route model will load as it should since it's not a link.
That's why there are differences.
You need to pass in the link-to not the category model, but its id if you want the model to be always executed in the route.

Answer 2

Well, or use query instead of findAll, since the first one, if the model is already in the store, does not re-enter the network, your K.O.