YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← Variable Substitution - Web Development

Get Embed Code
2 Languages

Showing Revision 4 created 05/24/2016 by Udacity Robot.

  1. Now we're actually going to use these templates. First thing
  2. we're going to learn is, variable substitution. The syntax for in,
  3. substituting a variable in Jinja is just double curly braces,
  4. and then you include your variable name, and then you
  5. close your curly braces. Pretty simple, right? Basically these curly
  6. braces, it just means print. It's as if you typed
  7. the print statement. In the middle of your HTML code.
  8. So let's see what that looks like in practice. Okay,
  9. I'm going to go into my shopping list HTML file. And add,
  10. I'm just going to add a string right to the bottom of
  11. the file. Okay. So I just said hello, and then I
  12. added in a curly, curly name. Now, where is name defined? It
  13. does not define anywhere yet. Let's see what happens when I
  14. reload this page with just this. Here I am in a
  15. browser. Let's reload this page. And it says hello, and there's
  16. nothing there. Actually we can get rid of this egg. That's a
  17. little leftover. So Jinja, if the variable's not
  18. defined, just quietly doesn't include it. Now let's
  19. go ahead and include name. Lets just kind of
  20. hacked this in real quick. Name equals Steve. Okay,
  21. so, remember before I was talking about this
  22. star, star syntax. Name equals Steve basically gets
  23. passed in as star, star kw, which gets
  24. passed along here. Which gets received by render string
  25. as star, star params. Just different variable names, to
  26. be deliberately confusing for some reason, and which gets passed
  27. into the render function from Jinja, which expects keyword parameters.
  28. So, it's going to define name equals Steve, and if we
  29. go to our browser and reload this. We see, it
  30. says hello Steve. Let's see if we can make this
  31. a little bit fancier. What is instead of name equals
  32. Steve all the time, we said name equals self.request.get name.
  33. So we can put name as a, as a parameter.
  34. Let's see if that works. Okay, if I reload this
  35. page, I get nothing, because there is no parameter. But
  36. if I add name equals udacity, we can see that
  37. udacity appears in our template. Okay, so, right now we
  38. basically have this very elaborate way of doing string substitution
  39. via these files, but we can, we can always see
  40. we're somewhat on the right direction of having cleaner code.
  41. And, time for our quick quiz, okay, so what I want you to do, is use
  42. variable substitution, the syntax I just showed you,
  43. to make this string. The quick brown and
  44. then the variable, animal1, jumped over the lazy,
  45. and then the variable, animal2. Go ahead and
  46. type this complete string with the correct variable
  47. substitutions for these variables, in the box here.