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 %}之类的东西，但我不知道如何将每个按钮的click事件与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＆＃34; modal-new-connection-OLX＆＃34;将使用OLX表单创建，并从OLX链接调用。

包含动态Django表单的模板

1 个答案: