Check out a free preview of the full Organizing JavaScript Functionality course:
The "Rendering on the Page" Lesson is part of the full, Organizing JavaScript Functionality course featured in this preview video. Here's what you'd learn in this lesson:

Rather than use an alert box to show the random number returning from the API call, Kyle demonstrates how to add a partial in the Grips template to display the result in HTML.

Get Unlimited Access Now

Transcript from the "Rendering on the Page" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Kyle Simpson: Let me just give you a slightly little bit more practice by working with the template engine in the browser. So let's go to our, about.grips file and let's define ourselves. A little thing like.
>> Kyle Simpson: Let's see, actually let me do it this way. Let's say that we want to include a partial.

[00:00:46]
>> Kyle Simpson: Let's define that partial down here.
>> Kyle Simpson: An example of shared form validation. Let me see if I can come up with something that's a good suggestion let me see if I can come up with something that won't be too complex.
>> Kyle Simpson: Okay. [COUGH] The define partial here.

[00:01:13] I'm sorry we need to give it the ID answer.
>> Kyle Simpson: Now inside in here we wanna have,
>> Kyle Simpson: We'll make a div with a rel attribute of js-answer.
>> Kyle Simpson: And what we wanna do is include, inside of that div.
>> Speaker 2: Can you increase your font size at all?

[00:01:45]
>> Kyle Simpson: Yeah.
>> Kyle Simpson: Is that better?
>> Speaker 2: I think so.
>> Kyle Simpson: Okay. [COUGH] All right so we want to include, so insert. Now in grips the way you get at your local variable context that you can insert from Do $., and then I assume that there's gonna be something called answer there.

[00:02:07] So we'll pass in that as some data that is able to render.
>> Kyle Simpson: So if we load the about page and there is no answer there, then obviously, it's just gonna end up rendering an empty div. But what we're gonna take advantage of now is our ability on the client side to re-render that partial and replace it.

[00:02:34] So I'll come back to my about.js. And let's get rid of this alert stuff. [COUGH] What we want to do now, is let's make ourself another function called render answer. And, we want to call that directly here.
>> Kyle Simpson: And we wanna call it here with resp.answer.
>> Kyle Simpson: So how are we going to render this answer?

[00:03:31] Well, we're going to call view.
>> Kyle Simpson: And let me look it up. I forgot what the method name is getPartialHTML there we go. So View.getPartialHTML and what I wanna say the way I'm gonna reference it is this is the about template. And then the name of the partial I separated with a pound, the name of the partial was answer.

[00:04:03] It's the thing that we created. And then I'm gonna pass it some data and the data needs to have that object data needs to have the the variable that we're expecting which is our answer. So we just include that.
>> Kyle Simpson: So that's all I need to do to invoke grips and have it re render just that template partial including in the data that I just grabbed out.

[00:04:33] And then I'm going to invoke some simple jQuery here. I'll pull, I'll get a reference to that js-answer div. That's sitting there. And I will replace it with the html that I just rendered. So am gonna take a div that I just re-rendered using that template engine and replace it with, I'm sorry take the old div and replace it with the new HTML from the template engine.

[00:05:11] So let me just stop and say the reason I'm doing this is because I genuinely believe, and this is not just about this project, it's in general. I don't think that we should be writing JavaScript to manually manipulate contents of DOM elements like saying dot value on some input box or something like that.

[00:05:33] The way that I approach updating my page is very actually similar to what they're talking about in the Ember glimmer thing that I'm talking about. I figure out which partial Is the smallest partial that needs to get rerendered with my new data, and I rerender it and I just replace wholesale the DOM element.

[00:05:52] And if I need to work with event handlers or rebind my event handlers. But you notice that I don't have a lot of deep code that knows about the DOM structure and deeply knowing about those things. I just say just re-render the template partial whatever the contents of it are.

[00:06:12] Okay. So we've changed our template, we've changed our code to use the template and if I'm not forgetting anything I think all we need to do is just simply refresh our page. So it starts out as undefined. And if we then do, that doesn't seem to work. Did I get an error?

[00:06:41]
>> Kyle Simpson: Okay, let's do some JavaScript debugging. There we go. Now it's getting the html in the right spot. And we'll verify that it still works even if we do things remotely. Still makes API calls and grabs the data and drops it in.