Though many of the concepts in this course are still relevant, overall this course does not reflect our current course standards.
Transcript from the "Challenge 7: Solution" Lesson
[00:00:00]
>> Zac: We'd start off looking at our 5.1 List API posts. And we'll pop open our ReadMe. And we could see that there's a few steps here. So first of all, we have to get access to the backbone client. And we're gonna do it in the same way that we did jQuery.
[00:00:16] We're just gonna make it a dependency. And then we've got to set up our JavaScript. So this will involved our introduction into the backbone client and how that works. And then we will test it and make sure that everything runs properly. So where do we need to go.
[00:00:36] First, we need to go into our functions dot php and make our file have a dependency.
>> Zac: Let's go to our functions.php.
>> Zac: And notice right here, it says, make this file dependent on wp-api. So just like before, we would have put jQuery down here. Instead, we're gonna do wp-api.
[00:01:02] And this will automatically load the backbone client that we want. So we did that and then next we come into our custom.php file. You know I don't know- If it says that.
>> Zac: No, that's in our JavaScript, setting up the JavaScript. So we'll come into, let's see, was there anything else about these functions, there was one other thing.
[00:01:36] Okay, notice this line of code. What do you think this is doing by just looking at it?
>> Zac: This is gonna make sure that our JavaScript code that is inside of here is only being run on this custom.php template. And inside this custom dot php template, we gave it a name.
[00:01:59] Again this is like very basic WordPress php stuff if you work with theme that is all pretty common. But if this is new, don't worry cuz it's already coded for you. So this would mean that once you put this here that it will show up in the back end and you can choose it as a custom template and it'll all work as intended.
[00:02:17] So there's nothing special on this page yet but there will be as we go on. So this is only gonna load on that page and now we need to go in to our theme.js file. So let's see what we've got going on here we've got our app container We're loading our posts, and then there's this function load posts where it says posts = GET_API_POSTS, and it wants us to change it to this value.
[00:02:48] So let's copy that and put it in there and this is the backbone client, this is what it looks like. So you'll say new.wp.collections.whatever, posts, pages, media, comments. And if you've worked with Backbone, you may guess that you could also do like wp.api.model, and pull in different things like that or post that way.
[00:03:14] So if you know some backbone this will make a little bit more sense, but if not it's pretty intuitive and there's not too much we have to do here. The next thing we do is this just gets the posts ready but we still have to fetch them in another call.
[00:03:29] So we're gonna change fetch posts to posts.fetch. And then, this is following the promise architecture. So it's basically setting up what you want to get. So we're gonna get posts. We're fetching the posts here. And then, once those posts are fetched, we're gonna clear the page. We haven't look at this, but you can guess what this function is doing.
[00:03:51] It's basically just wiping it blank. And then for each of our posts, we're going to load the post. So POST_HERE won't work. We have to pass this in, and this is where I have to talk about a little backboney stuff. So has anybody worked with Backbone, by chance?
[00:04:14]
>> Zac: No? Okay, this is really bad Backbone practice. Basically, the way Backbone works is it gives you access to posts, and we'll come to it in a second, but let's say that we wanted to do post.title.rendered specifically all right. So this will give us our post but doesn't like you doing that what it wants you to do is use a get to do like that I think it's either get or getattributes, something like that, very similar.
[00:04:53] Now the reason you wanna do this is because let's imagine that in our backbone app we're building, some of that data is changed and these collections are listening to those changes in data. If we take this approach of rather than doing .get of just hard coding into our attributes, we won't see those changes reflected.
[00:05:14] But the reason we could do this kind of hacky thing is that we're not using that backbone in that way. It's not like we are using an entire Backbone App where our model and our data is all connected. This is just simply helping us manage and get access to posts.
[00:05:29] And the creator suggested that we do it this way. So this is going to make our next step a lot easier. But I will point out that it's not necessarily the best practice. So we get all of our posts. Again, this is basically, behind the scenes, I think it's a jQuery Ajax call.
[00:05:53] And it's just dolling it up, and making it all pretty and nice for us. But we're basically saying, hey, get our posts, fetch them, and then, when you're done, clear the posts and then for each post go ahead and load that post. So we'll look down on our load post function.
[00:06:08] Has anybody ever written native Java Script like this where you append a markup string onto a page or into an object? Yea, Nay? Okay, like I said, I may lose you with some of the JavaScript we wrote. Don't worry about it too much. I'll show you the important parts right here.
[00:06:26] Basically, what we're doing is we're creating an article and then we're going to put a bunch of content inside that article. Just think of it that way. So, this is going to be put in h2 with an anchor tag, the title and then closing it, right? And if you haven't seen ES6 template strings, they're amazing cuz they allow us to basically refer to variables like this, okay?
[00:06:51] So it wants us to change some things. We're gonna change link to post.link. We're gonna change title to post.title.rendered. And we're gonna change content here to post.content, rendered. And this is why we looked before, remember? It was content and then you had to go to render. If we did this and removed attributes, we would have to do something like this.
[00:07:31]
>> Zac: This does not look as like JavaScripty and template languagey and clean as you might like. It may potentially be stronger backbone implementation behind the scenes, but since we don't really need to leverage that and this is a lot cleaner, this is why we're doing it, okay? So really behind the scenes that's why we're not just passing the regular post here, it's a backbone thing.
[00:07:59] clearPosts is just taking our entire app and clearing out the innerHTML setting it to zero, so that will clear away everything. So once we run this code we should see the posts being pulled into the page and loaded. So let's go ahead and save our changes and activate our theme 5.1.
[00:08:24]
>> Zac: Remember, the one thing you have to do to get this to work is go into a page on your site any page will do, I did have to set up a menu. If you're familiar with WordPress and how to use the customizer you can go into menus.
[00:08:48]
>> Zac: I only have two things on my site. Actually is it displaying a menu by default for you?
>> Zac: On your theme is it showing links here? Yes or no? Yes?
>> Male: Mine is.
>> Zac: Okay, cool. So you don't have to do that stuff I just showed you.
[00:09:08] Click on one of your pages. Go in and edit it. And make sure that you choose under template. Not the default template, but our Custom JS Page and that's what's gonna transform this and any other page that we assign to this template to work with the code that we just set up.
[00:09:26] Remember cuz JavaScript is only executing on that one page.
>> Zac: Okay, so we come to our site now. GIT_API_POSTS is not defined. Okay, so we missed something in theme.js so lets come back over here.
>> Zac: I know why. I just made all my edits not in my theme folder.
[00:09:53]
>> Zac: Shake the head, man, oops. Okay, sorry, I gotta go and catch up really quick. Okay, so we've got this all working right. I mean it is a completed one. I was editing the wrong file. But the code that we did should be correct and this has all of our pages.
[00:10:11] Now some of this stuff, like if we click on one of these links, it's going to go to the actual site. So ultimately, that may not be the behavior we want. We could play around with that, but we've got this working completely with just JavaScript now.