包含带有动态 Django 表单的模板

Question

我有一个带有选择字段的模型，创建表单根据字段具有不同的字段。我正在实现仪表板的设计，用户可以在其中单击一个按钮（每个选项一个按钮），然后将显示一个包含模型表单的模型。

我想仅为模型使用模板，并根据用户单击的按钮将表单和操作 URL 发送给它，但这意味着我必须混合 JS 和 Django 变量，我不知道这是否是好主意。

现在的代码是这样的：

dashboard.html

<div class="add-connections">
    <div class="col-sm-3 text-center" >
        <div class="connection-box">
            {% if user_connections.EP %}
                <img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
            {% else %}
                <a href="" class="btn" data-toggle="modal" data-target="#modal-new-connection">Activate</a>
            {% endif %}
        </div>
    </div>
    <div class="col-sm-3 text-center" >
        <div class="connection-box">
            {% if user_connections.OLX %}
                <img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
            {% else %}
                <a href="" class="btn" data-toggle="modal" data-target="#modal-new-connection">Activate</a>
            {% endif %}
        </div>
    </div>
    <div class="col-sm-3 text-center" >
        <div class="connection-box">
            {% if user_connections.CC %}
                <img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
            {% else %}
                <a href="" class="btn" data-toggle="modal" data-target="#modal-new-connection">Activate</a>
            {% endif %}
        </div>
    </div>
    <div class="col-sm-3 text-center" >
        <div class="connection-box">
            {% if user_connections.FR %}
                <img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
            {% else %}
                <a href="" class="btn" data-toggle="modal" data-target="#modal-new-connection">Activate</a>
            {% endif %}
        </div>
    </div>
</div>

{% url 'create_olx_connection' as olx_url %}
{% url 'create_ep_connection' as ep_url %}
{% url 'create_cc_connection' as cc_url %}
{% url 'create_fr_connection' as fr_url %}
{% include "properties/dashboard/connection_modal.html" %}

connection_modal.html

<!-- Modal -->
<div class="modal fade modal-property" id="modal-new-connection" tabindex="-1" role="dialog" aria-labelledby="myConnectionModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content panel-success">
      <div class="modal-header panel-heading">
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title text-uppercase text-white"><b>Connections</b></h4>
      </div>
      <div class="modal-body">
       <form action="{{ action_url }}"
        {{ form.as_p }}
        <div>
            <button type="submit" class="btn btn-outline-success">Activate connection</button>
            <a href="" class="btn">Cancel</a>
        </div>
       </form>
      </div>
    </div>
  </div>
</div>

views.py

def get_context_data(self, **kwargs):
        context = super(
            ManageServicesView, self).get_context_data(**kwargs)
        ...
        context['connection_forms'] = {
            'olx_form': OLXform(),
            'el_pais_form': ElPaisForm(),
            'finca_raiz_form': FincaRaizForm(),
            'calicasa_form': CaliCasaForm()
        }
        return context

我想要{% include "properties/dashboard/connection_modal.html" with form=chosen_form and action_url=chosen_url %} 之类的东西，但我不知道如何将每个按钮的点击事件与 Django 变量相关联才能做到这一点。我不想为每个选项编写模型，我认为它必须是一种更清洁的方式。非常感谢您的建议。

Answer 1

您可以在 connection_modal.html 中放置一个 {% for ... %} 循环，以生成您需要的所有具有正确形式的模态。比在dashboard.html 中放置另一个for 循环来创建正确的链接。

调整 views.py：

context['connections'] = {
    'OLX': {
        'form' : OLXform(),
        'user_connected': user_connections.OLX
    },
    'EP': {
        'form' : ElPaisForm(),
        'user_connected': user_connections.EP
    },
    # other connections here
}

dashboard.html：

{% for connection,data in user_connected.items %}
<div class="col-sm-3 text-center" >
    <div class="connection-box">
        {% if data.user_connected %}
            <img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
        {% else %}
            <a href="" class="btn" data-toggle="modal" data-target="#modal-new-connection-{{connection}}">Activate</a>
        {% endif %}
    </div>
</div>
{% endfor %}

connection_modal.html：

{% for connection,data in user_connected.items %}
 {% if not data.connected %}
  <!-- Modal for {{connection}} -->
  <div  id="modal-new-connection-{{connection}}" class="modal fade modal-property" tabindex="-1" role="dialog" aria-labelledby="myConnectionModal">
    <!--  modal code before form -->
    {{ data.form }}
    <!--  modal code after form -->
  </div>
 {% endif %}
{% endfor %}

这应该根据需要创建尽可能多的模式，每个模式都有自己的 id 值，可以从适当的链接调用。例如，modal id "modal-new-connection-OLX" 将使用 OLX 表单创建并从 OLX 链接调用。