Template variables with double braces in Django - Step-by-Step Execution

Concept Flow - Template variables with double braces

Template with {{ variable }}

↓

Django Template Engine reads template

↓

Find {{ variable }} placeholder

↓

Look up variable in context dictionary

↓

Replace {{ variable }} with value

↓

Render final HTML output

The template engine reads the template, finds double brace variables, replaces them with context values, and produces the final HTML.

Execution Sample

Django

<p>Hello, {{ name }}!</p>

This template outputs a greeting by replacing {{ name }} with the value from the context.

Execution Table

Step	Template Part Read	Action	Variable Looked Up	Value Found	Output So Far
1	<p>Hello,	Read static text	N/A	N/A	<p>Hello,
2	{{ name }}	Find variable placeholder	name	"Alice"	<p>Hello, Alice
3	!</p>	Read static text	N/A	N/A	<p>Hello, Alice!</p>
4	End of template	Rendering complete	N/A	N/A	<p>Hello, Alice!</p>

💡 Reached end of template, all variables replaced with context values.

Variable Tracker

Variable	Start	After Step 2	Final
name	undefined	"Alice"	"Alice"

Key Moments - 2 Insights

Why does {{ name }} get replaced with "Alice"?

Because in step 2 of the execution table, the template engine looks up 'name' in the context dictionary and finds the value "Alice", which it inserts into the output.

What happens if the variable is not in the context?

If the variable is missing, Django usually renders it as an empty string or leaves the placeholder unchanged depending on settings, but in this example, the variable 'name' is found, so it is replaced.

Visual Quiz - 3 Questions

Look at the execution table, what is the output after step 2?

A <p>Hello, {{ name }}

B <p>Hello, Alice

C <p>Hello,

D <p>Hello, Alice!</p>

💡 Hint

Check the 'Output So Far' column in row for step 2.

At which step does the template engine replace the variable with its value?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Look for the step where 'Variable Looked Up' is 'name' and 'Value Found' is "Alice".

If the context had name = "Bob", what would be the output after step 2?

A <p>Hello, Alice

B <p>Hello, {{ name }}

C <p>Hello, Bob

D <p>Hello, </p>

💡 Hint

Refer to variable_tracker and execution_table for how variable values affect output.

Concept Snapshot

Template variables use {{ variable }} syntax.
Django replaces these with context values.
If variable is missing, output may be empty.
This happens during template rendering.
Result is final HTML with values inserted.

Full Transcript

In Django templates, double braces {{ variable }} mark places where values from the context dictionary are inserted. The template engine reads the template, finds these placeholders, looks up the variable names in the context, and replaces them with their values. For example, if the template has <p>Hello, {{ name }}!</p> and the context provides name as "Alice", the output will be <p>Hello, Alice!</p>. This process happens step-by-step as the template is rendered. If a variable is missing in the context, Django may render an empty string or leave the placeholder depending on settings. This visual trace shows how the template is read, variables found, values looked up, and final output built.

Practice

1. What does the double braces syntax {{ variable }} do in a Django template?

easy

A. It displays the value of the variable passed from the view.

B. It runs a Python function inside the template.

C. It comments out the variable so it is not shown.

D. It creates a new variable inside the template.

Solution

1. Step 1: Understand Django template variable syntax

   Double braces {{ }} are used to show variables passed from the view inside the HTML template.

2. Step 2: Identify the purpose of {{ variable }}

   It outputs the value of the variable, making it visible in the rendered page.

3. Final Answer:

   It displays the value of the variable passed from the view. -> Option A

4. Quick Check:

   Double braces show variable value = A [OK]

Hint: Double braces always output variable values in templates [OK]

Common Mistakes:

• Thinking {{ }} runs Python code
• Confusing {{ }} with comments
• Assuming {{ }} creates variables

2. Which of the following is the correct way to display a variable named user_name in a Django template?

easy

A. {% user_name %}

B. <% user_name %>

C. {{ user_name }}

D. [[ user_name ]]

Solution

1. Step 1: Recall Django template variable syntax

   Variables are displayed using double braces {{ variable_name }} in Django templates.

2. Step 2: Match the correct syntax for user_name

   The correct syntax is {{ user_name }} to show the variable's value.

3. Final Answer:

   {{ user_name }} -> Option C

4. Quick Check:

   Use double braces for variables = B [OK]

Hint: Remember: variables use {{ }} not {% %} [OK]

Common Mistakes:

• Using {% %} which is for template tags
• Using <% %> which is not Django syntax
• Using [[ ]] which is not valid

3. Given the view passes {'count': 5} to the template, what will be rendered by this template code?

<p>Total items: {{ count }}</p>

medium

A. Total items: count

B. Total items: 5

C. Total items: {{ count }}

D. Total items:

Solution

1. Step 1: Understand variable substitution in template

   The variable 'count' with value 5 is passed from the view to the template.

2. Step 2: Replace {{ count }} with its value

   The template engine replaces {{ count }} with 5 in the rendered HTML.

3. Final Answer:

   <p>Total items: 5</p> -> Option B

4. Quick Check:

   Variable replaced by value = D [OK]

Hint: Variables inside {{ }} show their values, not names [OK]

Common Mistakes:

• Expecting the variable name to show instead of value
• Thinking {{ count }} stays as is in output
• Leaving the variable empty if not recognized

4. What is wrong with this Django template code if the view passes {'user': {'name': 'Anna'}}?

<p>User: {{ user.name }}</p>

medium

A. The variable name must be capitalized as {{ User.Name }}.

B. Django templates cannot access dictionary keys with dot notation.

C. The variable should be accessed as {{ user['name'] }} instead.

D. The syntax is correct; it will display 'User: Anna'.

Solution

1. Step 1: Check how Django templates access dictionary keys

   Django templates allow accessing dictionary keys using dot notation like {{ user.name }}.

2. Step 2: Confirm the output

   Since user is a dictionary with key 'name', {{ user.name }} will correctly display 'Anna'.

3. Final Answer:

   The syntax is correct; it will display 'User: Anna'. -> Option D

4. Quick Check:

   Dot notation works for dict keys = A [OK]

Hint: Use dot notation for dict keys in templates [OK]

Common Mistakes:

• Trying to use bracket notation in templates
• Assuming dot notation only works for objects
• Capitalizing variable names incorrectly

5. You want to display a user's full name in a template. The view passes {'user': {'first_name': 'John', 'last_name': 'Doe'}}. Which template code correctly shows "John Doe" using double braces?

hard

A. {{ user.first_name }} {{ user.last_name }}

B. {{ user['first_name'] + ' ' + user['last_name'] }}

C. {{ user.first_name | add:' ' | add:user.last_name }}

D. {% user.first_name %} {% user.last_name %}

Solution

1. Step 1: Understand how to access dictionary keys in templates

   Use dot notation {{ user.first_name }} and {{ user.last_name }} to get values.

2. Step 2: Combine variables with a space in between

   Write both variables separated by a space in the template to display full name.

3. Step 3: Check other options for correctness

   {{ user['first_name'] + ' ' + user['last_name'] }} uses invalid syntax for concatenation in templates; {{ user.first_name | add:' ' | add:user.last_name }} uses a wrong filter; {% user.first_name %} {% user.last_name %} uses wrong tag syntax.

4. Final Answer:

   {{ user.first_name }} {{ user.last_name }} -> Option A

5. Quick Check:

   Use dot notation and space for concatenation = C [OK]

Hint: Use {{ var1 }} {{ var2 }} to join values with space [OK]

Common Mistakes:

• Trying to concatenate strings inside {{ }} directly
• Using {% %} tags for variables
• Using filters incorrectly for string join