python - Django 在 for 循环中包含模板标签只捕获第一次迭代

Question

我在我的网站上的某些页面上有一个评论部分，我使用 {% for ... %} 循环(以及另一个用于评论回复的嵌套循环)构建。该部分被黑在一起，我还在学习网络开发和 Django，所以请原谅任何令人沮丧的草率或怪异之处。我目前不关心效率，只关心功效，现在它工作得不太好。

对于每条评论，我都有一个 Bootstrap 下拉按钮，它将弹出选项 Edit 和 Delete。 Edit 将打开一个模式来编辑评论。模态框使用 {% include %} 标签呈现。下面我包含了部分未修改的代码，而不是试图简化我的示例并冒着遗漏一些关键内容的风险:

<div class="panel panel-default">
    {% for comment in spot.ordered_comments %}
    <div class="panel-heading row">
        <div class="col-sm-10">
            <strong>{{ comment.poster.username }}</strong>
            <em style="margin-left: 2em">{{ comment.created|date:'M d \'y \a\t H:i' }}</em>
        </div>
        <div class="btn-group col-sm-2" role="group">

            {% if comment.poster == user %}
            <form id="delete-comment-form" class="form"
                  method="post" action="{% url 'delete_comment' spot.id comment.id %}">
                {% csrf_token %}
            </form>

            {% include 'topspots/editmodal.html' with edit_type='comment' %}

            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="fa fa-edit"></i> <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#" data-toggle="modal" data-target="#editModal">Edit</a></li>
                    <li role="separator" class="divider"></li>
                    <li>
                        <a href="javascript:;" onclick="$('#delete-comment-form').submit();">Delete</a>
                    </li>
                </ul>
            </div>

            {% endif %}

            {% if user.is_authenticated %}
            {% include 'topspots/replymodal.html' %}
            <button type="button" class="btn btn-default" data-toggle="modal"
                    data-target="#replyModal">
                Reply
            </button>
            {% endif %}
        </div>
    </div>

    <div class="panel-body">
        <div class ="row">
            <div class="col-sm-8">
                {{ comment.comment_text }}
            </div>
        </div>
        <br/>

        <!-- Comment replies -->
        {% if comment.commentreply_set %}
        {% for reply in comment.commentreply_set.all %}
        <div class="row" style="padding-left: 1em">
            <div class="col-sm-8 well">
                <p>{{ reply.reply_text }}</p>
                <div class="row">
                    <div class="col-sm-4">
                        <p>
                            <strong>{{ reply.poster.username }}</strong>
                            <em style="margin-left: 2em">{{ comment.created|date:'M d \'y \a\t H:i' }}</em>
                        </p>
                    </div>
                    {% if reply.poster == user %}
                    {% include 'topspots/editmodal.html' with edit_type='reply' %}
                    <form id="delete-reply-form" class="form"
                          method="post" action="{% url 'delete_reply' spot.id reply.id %}">
                        {% csrf_token %}
                    </form>
                    <div class="col-sm-2">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-edit"></i> <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#" data-toggle="modal"
                                       data-target="#editModal">Edit</a></li>
                                <li role="separator" class="divider"></li>
                                <li>
                                    <a href="javascript:;"
                                       onclick="$('#delete-reply-form').submit();">Delete</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
        {% endif %}

    </div>
    {% endfor %}
</div>

这是编辑模式:

<!-- editmodal.html -->
{% load static %}

<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title" id="editModalLabel">
                    Edit {{ edit_type }}:
                </h2>
            </div>
            <form action="{% url 'edit_comment' spot.id comment.id %}" method="post">
                <div class="modal-body">
                    <input class="form-control" name="text" value="{{ comment.comment_text }}" autofocus>
                    <input type="hidden" name="edit_type" value="{{ edit_type }}">
                    {% csrf_token %}
                </div>
                <div class="modal-footer">
                        <button type="submit" class="btn btn-default">Finish editing</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>

    $('.modal').on('shown.bs.modal', function() {
        $(this).find('[autofocus]').focus();
    });

</script>

和回复模式:

<!-- replymodal.html -->
{% load static %}

<div class="modal fade" id="replyModal" tabindex="-1" role="dialog" aria-labelledby="replyModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title" id="replyModaLabel">
                    Reply to <strong>{{ comment.poster.username }}'s</strong> comment
                </h2>
            </div>
            <div class="modal-body">
                <form action="{% url 'reply_comment' spot.id comment.id %}" method="post">
                    <input class="form-control" name="reply_text" placeholder="Write a reply..." autofocus>
                    {% csrf_token %}
                </form>
            </div>
        </div>
    </div>
</div>
<script>

    $('.modal').on('shown.bs.modal', function() {
        $(this).find('[autofocus]').focus();
    });

</script>

我遇到的问题是我的回复和编辑模式(例如 {% include 'topspots/editmodal.html' with edit_type='reply' %} 或 {% include ' topspots/replymodal.html' %} 似乎只在我的 for 循环第一次迭代的上下文中呈现一次。所以即使所有问题都正确呈现在页面上，当我单击回复、编辑或删除，无论我点击哪个按钮(即点击第一条评论的按钮，还是点击第五条评论的按钮，等等)我只能回复，编辑或删除第一条评论。我有一种感觉在某种程度上与闭包和范围有关，我不太了解(由于 this 或 this，我在 Python 循环中使用 lambda 时遇到了意外结果的麻烦) , 但我不确定。

我用下面的 View 做了一个测试:

def test(request):
    spots = Spot.objects.all()
    return render(request, 'test.html', {'spots': spots})

和模板:

<!-- test.html -->
<h1>Hello world</h1>
{% for spot in spots %}
    {% include 'testinclude.html' %}
{% endfor %}

和

<!-- testinclude.html -->
<h3>{{ spot.name }}</h3>

它打印出一个独特的点名称列表，那么为什么与模态不同？

Answer 1

作为emulbreh postulates ，实际上会为每个评论呈现一个模态。但是，所有模态框都有相同的 ID，因此无论点击哪个评论的编辑按钮，每次都会触发第一个模态框。 ID 应该在整个 HTML 文档中是唯一的。

如何解决这个问题？您可以使模态的 ID 对于每个评论都是唯一的。您可以通过编写 id="editModal-{{ comment.id }}" 或只是 id="editModal-{{ forloop.counter }} (文档 here )。

但是您的 editModal.html 模板与您的“主”模板紧密耦合。更好的解决方案是使用 classes instead of IDs并将标识放在它所属的位置:每个评论的容器。你可以试试:

1. 为每个评论的容器添加一个 ID:

   <div class="panel panel-default">
   {% for comment in spot.ordered_comments %}
     <div class="panel-heading row" id="comment-{{ comment.id }}">
       ...
   

2. 在模态模板中使用类而不是 ID:

   <!-- editmodal.html -->
   {% load static %}
   
   <div class="modal fade editModal" tabindex="-1" ...>
     ...
   

3. 更改按钮中的 data-target 来自:

   <li><a href="#" data-toggle="modal" data-target="#editModal">Edit</a></li>
   

   到:

   <li><a href="#" data-toggle="modal" data-target="#comment-{{ comment.id }} .editModal">Edit</a></li>