Django模板标签入门：如何实现Example.html中的循环渲染逻辑？

Hey there! Since you're new to Django template tags, let's walk through how to get your desired logic working smoothly.

First, let's clarify what you're aiming for: in each iteration of the {% for %} loop, you want to display the current number paired with Form1 (labeled as "first loop"), then show the same number paired with Form2 (labeled as "second loop"). Right?

Fixing the Template Code #

Your original code uses ##### as separators—those will just render as plain text in the browser. Instead, let's use more semantic HTML to structure the content, plus proper Django form rendering:

{% for number in numbers %}
    <!-- First loop section: Number + Form1 -->
    <h4>First Loop</h4>
    <p>Current Number: {{ number }}</p>
    <!-- Render Form1 with paragraph wrapping (use as_table/as_ul for other layouts) -->
    {{ Form1.as_p }}

    <!-- Visual separator between sections -->
    <hr>

    <!-- Second loop section: Number + Form2 -->
    <h4>Second Loop</h4>
    <p>Current Number: {{ number }}</p>
    {{ Form2.as_p }}

    <!-- Thick separator between loop iterations -->
    <hr style="border: 2px solid #ccc; margin: 2rem 0;">
{% endfor %}

Key Details to Note #

1. Form Rendering:

   • {{ Form1.as_p }} is Django's built-in way to render a form with each field wrapped in <p> tags. You can swap this for {{ Form1.as_table }} (table layout) or {{ Form1.as_ul }} (list layout) based on your design needs.
   • If you need full control over form styling, you can manually loop through the form fields:

     {% for field in Form1 %}
         <div class="custom-form-field">
             {{ field.label_tag }} <!-- Renders the field label -->
             {{ field }} <!-- Renders the input element -->
             {% if field.errors %}
                 <span class="text-red-500">{{ field.errors.0 }}</span>
             {% endif %}
         </div>
     {% endfor %}
     

2. Context Variables:
   Make sure your view is passing all required variables to the template. Here's a quick example of a function view doing this:

   from django.shortcuts import render
   from .forms import YourForm1, YourForm2  # Import your form classes
   
   def example_view(request):
       # Example numbers list—replace with your actual data
       numbers = [1, 2, 3, 4]
       # Initialize your forms (pass request.POST if handling submissions)
       form1 = YourForm1()
       form2 = YourForm2()
   
       # Pass variables to the template
       return render(request, 'Example.html', {
           'numbers': numbers,
           'Form1': form1,
           'Form2': form2
       })
   

Quick Alternative (If You Want Separate Loops) #

If your goal was to show all numbers with Form1 first, then loop through numbers again with Form2 (instead of both sections in one loop), you'd split into two separate loops:

<!-- First loop: Numbers + Form1 -->
<h3>First Loop Group</h3>
{% for number in numbers %}
    <p>Number: {{ number }}</p>
    {{ Form1.as_p }}
    <hr>
{% endfor %}

<!-- Second loop: Numbers + Form2 -->
<h3>Second Loop Group</h3>
{% for number in numbers %}
    <p>Number: {{ number }}</p>
    {{ Form2.as_p }}
    <hr>
{% endfor %}

But based on your original code, the first approach (both sections in one loop) is what you're after.

内容的提问来源于stack exchange，提问作者John B