Now we're actually going to use these templates. First thing
we're going to learn is, variable substitution. The syntax for in,
substituting a variable in Jinja is just double curly braces,
and then you include your variable name, and then you
close your curly braces. Pretty simple, right? Basically these curly
braces, it just means print. It's as if you typed
the print statement. In the middle of your HTML code.
So let's see what that looks like in practice. Okay,
I'm going to go into my shopping list HTML file. And add,
I'm just going to add a string right to the bottom of
the file. Okay. So I just said hello, and then I
added in a curly, curly name. Now, where is name defined? It
does not define anywhere yet. Let's see what happens when I
reload this page with just this. Here I am in a
browser. Let's reload this page. And it says hello, and there's
nothing there. Actually we can get rid of this egg. That's a
little leftover. So Jinja, if the variable's not
defined, just quietly doesn't include it. Now let's
go ahead and include name. Lets just kind of
hacked this in real quick. Name equals Steve. Okay,
so, remember before I was talking about this
star, star syntax. Name equals Steve basically gets
passed in as star, star kw, which gets
passed along here. Which gets received by render string
as star, star params. Just different variable names, to
be deliberately confusing for some reason, and which gets passed
into the render function from Jinja, which expects keyword parameters.
So, it's going to define name equals Steve, and if we
go to our browser and reload this. We see, it
says hello Steve. Let's see if we can make this
a little bit fancier. What is instead of name equals
Steve all the time, we said name equals self.request.get name.
So we can put name as a, as a parameter.
Let's see if that works. Okay, if I reload this
page, I get nothing, because there is no parameter. But
if I add name equals udacity, we can see that
udacity appears in our template. Okay, so, right now we
basically have this very elaborate way of doing string substitution
via these files, but we can, we can always see
we're somewhat on the right direction of having cleaner code.
And, time for our quick quiz, okay, so what I want you to do, is use
variable substitution, the syntax I just showed you,
to make this string. The quick brown and
then the variable, animal1, jumped over the lazy,
and then the variable, animal2. Go ahead and
type this complete string with the correct variable
substitutions for these variables, in the box here.
では実際にテンプレートを使おうと思います。
最初に学ぶことは「変数置換」です。
jinja2における変数置換の構文は単純です。
開始の {{ の後に 変数の名前
そして終了の }} です。簡単ですね？！
この {{ }} はprintメソッドのようなものと考えてください。
HTMLコードの途中でprintを使っているイメージです。
実際に使って見ましょう。
shopping_list.htmlに移動して
一番下にコードを追加します。
"Hello"と表示するだけのHTMLに
{{ name }} を追加しました。nameはどこで定義されるのでしょう？
nameはまだどこにも定義していません。
ページをリロードするとどうなるでしょうか。
ブラウザをリロードします。"Hello"とだけ表示されました。
この"eggs"は消しましょう。残っていただけです。
jinja2では変数がセットされていない場合
ただ単に何も表示しません。
ではnameを表示させてみましょう。
これ修正は本当にすぐ終わります。name="steve"
**の意味に関する説明を覚えていますか？
name="steve"はそのまま変数として**kwに渡されて
**kwはここに変数を渡します。
渡された変数はrender_str()に**paramsとして渡されます。
変数名がころころ変わって混乱しそうですが、
これは理由があってのことです。
そして変数はjinja2のrender()にparamsとして渡されます。
name="steve"と定義しました。
ブラウザに戻ってリロードしましょう。
"Hello, steve"と表示されました。
少しいじりましょう。nameを固定値の"steve"ではなく
self.request.get("name")にします。
nameパラメータに値を渡せば
それが表示されるはずです。
リロードすると何も表示されません。パラメータを渡していないからです。
"udacity"をパラメータとして渡します。
テンプレートによって"udacity"が表示されました。
このよく考えられた方法とコードによって
無事、文字列の置換ができました。
しかし正しく美しいコードを書くため、さらに考慮すべきことがあります。
それではクイズです。
考えて欲しいのは、今説明した変数置換の構文を使って
この文字列を生成することです。
"The quick brown animal1 jumped over the lazy animal2"
さぁどうぞ。
変数置換を使ったコードを
ここに記載してください。