動的Djangoフォームを含むテンプレートを含む

Question

私は選択肢フィールドを持つモデルを持っていて、作成フォームはフィールドによって異なるフィールドを持っています。ユーザーがボタンをクリックすることができるダッシュボードの設計を実装しています（各選択肢ごとに1つのボタン）。モデルフォームを含むモデルが表示されます。

モデルのテンプレートのみを使用し、ユーザーがクリックするボタンに応じてフォームとアクションの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ループを追加します。

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 %} 

views.pyを微調整必要なだけ多くのモーダルが作成され、それぞれが独自のid値を持ち、適切なリンクから呼び出すことができます。たとえば、モーダルID "modal-new-connection-OLX"はOLXフォームで作成され、OLXリンクから呼び出されます。