This course has been updated! We now recommend you take the Ember Octane Fundamentals course.
Transcript from the "Retrieving Data" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Mike North: Talking to APIs and using simple models. In terms of retrieving data we have this library I've mentioned called ember data which is a robust way of dealing with a restful API. But we don't necessarily need to use it. If you can use J query you can connect to an API with ember, and the reason is that ultimately we just care about the concept of a promise, and at this point in modern web technology, modern web UI technology.
[00:00:38] Everyone's using promises. So you need to be aware of setup controller, we've already used that a couple times to sort of add something extra to the context the template is bound to. And you just need to be aware that the controller is the top level contact for this stuff.
[00:01:03] And the reason I'm saying this is because, now we are going to deal with some data that is a little bit more complicated and we need to sort of be aware of how to get it all set up in the right way. So that we can start using that instead of our little fixtures and rays in the model hooks.
[00:01:22] So here is an example of a simple way to retrieve data from an API and I'm gonna talk you through it line by line. Hopefully everyone can see this on the stream here and if it's difficult check out the PDF download. So, in the model hook, the first thing I'm doing is using this dot model for.
[00:01:49] And in this case. You can see from the API request I'm making at the bottom of the model hook. I'm actually getting the list of repos in this case.
>> Speaker 2: What file are we looking at right now?
>> Mike North: Good question. We are looking at the the repo's route.
[00:02:05] It's org repos and it's not committed yet but this is sort of solving part of the exercise coming up. So I'm basically giving you the solution for one piece and hopefully we can apply it broadly to the whole app. So here we're fetching a list of repos and if we remember this params segment, this params object, that's an argument of the model method.
[00:02:36] It's only going to have values from the dynamic segment that pertained to this particular route. And in this case it is the repo ID. I'm sorry, in this case, it is nothing. My mistake. I'm just going to refer back to our router here. We're talking about this route here.
[00:02:58] No dynamic segment, we're falling back to the default path which is just repos.
>> Mike North: So in order to make this request we need the ID of the org to which you know this URL pertains. And to do that we use the stop model for and we're getting the model from the parent route.
[00:03:23] We're getting the ID. Off of that model and then we're using that to build the URL to ask GitHub for this array. And we're simply returning the promise, and because this is one of the route's promise aware hooks by the time future hooks get called. And by the time the template has access to the model or content property we will be dealing with an array not a promise.
[00:03:55] So I also in an effort to make the orb object available to this template I'm actually grabbing the org from the right route here. And I'm setting it on the controller as part of setup controller and this means that in the repose.hbs template we'll be able to refer to something like org.id or org.name or whatever Gethub happens to give us.
[00:04:25] But mainly I just want you guys to refresh the concept of using setup controller to sort of add some extra things that are in addition to the whatever the model is returning, and I want you guys to remember model four.
>> Speaker 3: Would you normally just turn the org and the RCP hash?
[00:04:47] As opposed to using temp control.
>> Mike North: In this case, because this route is a child route of something that already has resolved the org, I would not wanna ask GitHub again for that same data.
>> Speaker 3: I'm just saying if Git, so. This model for org and then put that as a value in your model hash as opposed to me using using setupController.
[00:05:13]
>> Mike North: Yeah we could do that and then it would be model.org or content.org.
>> Speaker 3: [CROSSTALK] manage either one?
>> Mike North: It's basically the same.
>> Speaker 3: Okay.
>> Mike North: It's just what do you wanna call it? What seems better in the template as when you're dealing with something this simple, that's what I would let cover in that decision.
[00:05:32] Now, if we were dealing with 10 or 12 different things, I could say probably then. Then, when you're asking yourself what's the primary model for this template, the answer is not so simple. It's really the agglomeration of these 10 things. But in this case, it's clear. The list is really what this is all about, and we're tacking on this extra thing instead of controller.
[00:05:53]
>> Speaker 4: Quick question on the line where you're defining orgName.
>> Mike North: Yes.
>> Speaker 4: They wanna know why you didn't use .getid instead of .id.
>> Mike North: Good question. It is because in this case, it is a plain java script object. It is not an ember object. Now, I could, when I go through the example when I solve the problem.
[00:06:18] I will show you how to do something that doesn't care about whether it's an ember object or just a plain java script object.
>> Mike North: So, in the template here, you can see that we have direct access. And this is the matching template for the route we were just looking at.
[00:06:36] This is repos.hbs. We can see that we can access properties off of org directly, because of what we did inside of controller. And we can iterate over content or model and build links based on that. So I wanna be clear that we're working with simple models and it, we're talking about like, at the Ember generator for generating a model or the models folder.
[00:07:09] That is not what we're working with yet. We are just dealing with a simple representation of our data for now and we'll sort of tack on the more complex and more robust way of dealing with it later on. One thing Ember does care about in order to align well with the convention over configuration and stuff.
[00:07:30] Is make sure that you have this property id on the object. And for the purposes of what we've done so far an example where id is important is if we pass the whole object itself to the link-to handlebars helper the helper will grab the property id off of it.
[00:07:52] And so, that better be what we want to appear in our URL when we're building links. In this case, when we start talking to the GitHub API, we will see that what we want to be in the URL is not what they call id and we have to do a little massaging.