Ember Data: RSVP Question


#1

Hello,

I’m new to Ember and trying to wrap my head around returning multiple model data using RSVP.hash.

Let’s say I have data models called: thing1 thing2 thing3

Returning and displaying these values on a single model is straight forward following these guides: https://guides.emberjs.com/v2.12.0/routing/specifying-a-routes-model/#toc_multiple-models

Am I able to have thing1, thing2 and thing3 combine to make the value things? Which after reading this seemed to be possible. http://emberjs.com/api/classes/RSVP.html#method_all

What I am currently trying to do is define the value things on my routes/things/index whereas things1 sits at routes/things/thing1/index etc…

And once things is defined I assume I then just call {{#each model as |things|}} in my hbs template.

As mentioned, I’m new so this may not be the Ember way of doing things I keep reading about so any advice is much appreciated.

Thanks!


#2

I am not 100% sure I understand the question but I think you are looking for setupController.See:


#3

Thanks @broerse, I think setupController might be what I need as well.

What I’m trying to do in a nutshell: I have 3 models displaying data on 3 separate pages. On my fourth page, I want to display all of these models.

So my thinking (which could be wrong :slight_smile: ) is to make a single variable which I can call in my template instead of having to call all 3 models.

Does that make more sense?


#4

RSVP.hash will still create 3 root keys so I think I would setup 3 models on the fourth route. If the information in the 3 models is exactly in the same structure and you want to squash them in one array I think you need to use Ember.computed to create it.


#5

I can’t really answer your question, but this is a good resource: https://emberigniter.com/load-multiple-models-single-route for many models.

If you build out an example ember-twiddle, it might be easier to see the specifics of your use case and offer an alternative. There are many times where I want a ‘dashboard’ type page that includes all my models - but there is this “don’t use RSVP” attitude out there and no other ember-approved solution. In theory, we’d have components with each model - right?


#6

thanks @sheriffderek I did see that Ember Igniter article in my initial attempts to solve my problem.

I have tried to make an Ember Twiddle but I’m new to this and I can’t get it to work without it giving me a thousand errors in the console. But hopefully it gives you an indication of what I am trying to achieve.

If it needs editing / updating please let me know and I will try again :slight_smile:

https://ember-twiddle.com/3b204c7e80740168cc72bd6541645eb9?openFiles=templates.application.hbs%2C


#7

OK. This is a good example of why the twiddle is helpful. Your errors are because of how you’ve thought through the resource. What it wants is a model like ‘thing’ in singular and then to iterate through ‘things’… so it’s confused and looking for thing3s because ember-data is pluralising what you’ve given it. I’ll look at it more thoroughly when I can…

‘thing’ is great, but a real-world example might be easier to work with.


#8

@sheriffderek I’ll update my twiddle shortly with the real world things I’m using.


#9

@sheriffderek I have now made a new Twiddle with real word example.

Unfortunately I still get a bunch of errors in the Twiddle I don’t get locally. As before, please let me know if it needs updating at all.

I probably should also mention that the data in my real world application is being stored and coming from Firebase.


#10

So would you say that ‘swarm’ is a “team” ? or is it a “player”?

I would expect your model to be ‘team’, and then each team would have a ‘title.’

// teams.js
import DS from 'ember-data';

export default DS.Model.extend({
  title: DS.attr('string'),
  players: DS.hasMany('player'),
});

(ember-twiddle is great, but I also know that renaming things and reworking file structures is not very smooth - so it’s best to move one step at a time and just do it once, instead of putting it all in there and allowing the errors.)

Take a look at this and see if this is in the right direction: https://ember-twiddle.com/e2139385e72c58dcbc27e532208c99bf?openFiles=templates.teams.team-list.hbs%2C

Maybe something like this?


#11

This mostly makes sense to me. I think the part I really can’t understand is the getting the players to list out in the template. From looking at your example I think they should but they don’t and they get logged in the console.

{{log something}} was a great tip tho! I had often wonder how I could console.log things so thanks!