点击每个链接的 django 加载模式

Question

在我的项目中，我有许多 Buildings，而在 buildings.html 中，我使用单个图像 (big_image) 显示每个 Building。我想要做的是每次用户点击Building时加载一个模态，这个模态允许用户查看建筑物的其他图像。

如果我在用户进入页面时加载每个Building 的模式，这将非常容易。但是如果我这样做，页面将需要很长时间才能加载（因为有很多Buildings），所以我的想法是使用jQuery的.innerHTML在用户点击Building时将模态html附加到页面，但是当我这样做时，唯一附加的代码是

`{% for building in buildings %}{% if building.pk == 1(or whatever is the pk) %}{% endif %}{% endfor %}`

可能有一种更简单的方法可以实现我不知道的目标

这是我的代码：

buildings.js

function loadModal(objectPk){
    document.getElementById("loadModal").innerHTML =

"{% for building in buildings %}{% if building.pk == "+objectPk+" %}
<div class="modal fade mymodal in " id="myModal{{ building.pk }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
 aria-hidden="true">
<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>
            <h4 class="modal-title" id="myModalLabel">{{ building.name }}</h4>
        </div>
        <div class="modal-body">
            <p>{{ building.short_description }}</p>
            {% for i in building.images.all %}
            <img src="{{ i.image.url }}" class="img-responsive">
            {% endfor %}
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
        </div>
    </div>
</div>
</div>{% endif %}{% endfor %}";
}

以上所有内容都在一行中。

buildings.html

<a data-toggle="modal" data-target="#myModal{{ building.pk }}" href="" onClick="JavaScript:loadModal({{ building.pk }});"></a>
<div id="loadModal"></div>

views.py以防万一

class BuildingsModalView(generic.ListView):
    template_name = 'info/buildings.html'

    context_object_name = 'construction_list'

    queryset = Residence.objects.all() #ignore this

    def get_context_data(self, **kwargs):
        context = super(BuildingsModalView, self).get_context_data(**kwargs)
        context['building'] = Buildings.objects.all()
        # And so on for more models
        return context

Answer 1

您可以使用一些 javascript 来更改模态的 html 中的值。在此示例中，我为每个建筑物创建了一个链接，其中包含 img、description 和 name 的数据属性。

然后，我将点击监听器添加到构建链接的类中。单击时，它会访问所有这些数据值并将它们弹出到模态的正确位置。

<!-- Create a unique link for every building -->
{% for building in buildings %}
<a href="#"
    class="building-link"
    data-toggle="modal"
    data-target="#building-modal"
    data-img="{{ building.img.url }}"
    data-description="{{ building.short_description }}"
    data-name="{{ building.name }}">
    {{ building.name }}
</a>
{% endfor %}

<!-- This is our blank modal, with ids for the values to be injected -->
<div class="modal fade mymodal in " id="building-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
 aria-hidden="true">
    <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>
                <h4 class="modal-title" id="building-name"></h4>
            </div>
            <div class="modal-body">
                <p id="building-description"></p>
                <img id="building-img" src=""/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<!-- When a link is clicked, grab all the data values and pop them inro the modal -->
<script>
$('.building-link').click(function(){
    $('#building-name').html($(this).data('name'));
    $('#building-description').html($(this).data('description'));
    $('#building-img').src($(this).data('img'));
});
</script>

那么唯一不做的就是做所有的建筑图像。我建议只加载一个开始，然后设置另一个端点以在选择一个后获取所有建筑图像。