How to handle summary models in Ember properly?

Ember Data
1

Hello,

I have a “model” “movie” with fields:

name: string
id: number
description: string
genre: string
actors: string
director: string
year: number

On a summary view i display only name and id, genre, actors . When i go into details of a movie i display also description, director and year.

Because description is long i would like to load only name and id when being on a summary page and then when i go into details i would like to display also description. I have one endpoint to get id and name, and second to get id, name and description.

My current solution is that i have two models: movie and moviesummary.

Movie has:

id: string
name: string
genre: string
actors: string

Moviesummary:

id: string
name: string
description: string
director: string
year: number

And movie calls one endpoint to populate itself, and moviesummary second endpoint. This works. Thus disadventages of this solution is that you need to make sure to have updated summary after details change.

For example when i go into details page and edit name, i need somehow to update summary. Currently i do it by reloading data each time user goes into summary page. But this is not very good because synchronisation issues.

Is this a correct approach in Ember? Or should i do it other way?

Especially is it possible to have movie and moviesummary inside one model and populate it depending on needs from two endpoints?

When i tried to do it with single model it didn’t work. Because when summary is loaded, Ember does not ask again for the same record from the detailed endpoint.

2

Hi @tomaszs, this is definitely a tricky scenario with a number of possible solutions. If you really only want to do a partial load and then details later there are a couple things you could try:

  1. use a query param like “includeDetails=true” to load the extra information. Then you could keep everything on one model on the frontend and one endpoint on the backend and only send the data you want in each case. You could add the query param using adapterOptions. This solution isn’t great though. You might run into some edge cases too.
  2. my recommended solution would be to have two models on the frontend and link them with a relationship so none of the data is duplicated. Something like “movie” and “movie-details” or something. Movie has a belongsTo relationship to a movie-details record which it loads if you want to display the “heavier” details like description. Then you’re not duplicating data across models. This would either require some backend changes or some serializer and adapter magic.
  3. You could also look into ember-model-fragments. I’m not 100% sure it would help you a ton (I don’t have any real world experience with it myself) but it might clear up the model structure at least.