Джанго - Bootstrap: модальный

Question

Я имею в шаблон 2 цикла:

{% for person in players %} 
    <a href="#" class="thumbnail" data-toggle="modal" data-target="#modal_personn"> {{person.user.username}} </a> 
{% endfor %} 

{% for person in examiners %} 
    <a href="#" class="thumbnail" data-toggle="modal" data-target="#modal_personn"> {{person.user.username}} </a> 
{% endfor %} 

И я в том же шаблоне модальный:

<div id="modal_person" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <div> 
        <h3 class="modal-title"> {{person.user.username}} </h3> 
        <i>{{ person.created_at|date:"d M, Y" }}</i> 
       </div> 
      </div> 
      <div class="modal-body"> 
       {% with subscribe = person.user.subscribe %} 
        {% if subscribe.age %} 
         <div> 
          {{subscribe.age }} years old 
         </div> 
        {% endif %} 
        {% if subscribe.presentation %}         
         <h4> His presentation </h4> 
         <div class="row"> 
          {{ subscribe.presentation }} 
         </div> 
        {% endif %} 
       {% endwith %} 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn" data-dismiss="modal"> Contact </button> 
      </div> 
     </div> 
    </div> 
</div> 

Так что проблема: я не хочу для вставки модальности в эти две петли, потому что в конце они много модалов ... и это неправильно.

Так что, когда пользователь нажимает на ссылку в цикле, этот модальный открывается с данными, специфичными для текущего «лица» цикла.

Как это сделать?

Я думаю, чтобы использовать этот (данные-идентификатор модального):

<a href="#" class="thumbnail" data-toggle="modal" data-target="#modal_personn" data-id="{{person.user}}">{{person.user.username}} </a> 

И модальный завершаются со значением данных идентификатора (Jquery). Как вы думаете ?

Каково ваше решение для открытия модальности, которая содержит значение для текущего человека в цикле?

Answer 1

Способ сделать именно то, что вы просите, чтобы использовать библиотеку как JQuery динамически изменять содержимое модального в зависимости от того, что ссылка была нажата:

$("a.thumbnail").click(function() { 
    var personId = $(this).attr('id'); 
    // Use jQuery to adjust the modal based on the data attributes. 
    // You would still have to pass these attributes to the DOM 
    // somehow, like 
    var age = $(this).attr('age'); 
    $("#modal-person .age").text(age); 
}); 

Однако, вы говорите:

Таким образом, проблема заключается в следующем: я не хочу вставлять модальные данные в эти две петли, потому что в конце они много модалов ... и это не правильно.

Было бы проще сделать другой способ для каждого человека - в этом нет ничего естественного. На самом деле, чтобы реализовать вышеприведенное решение, если вы не используете AJAX каждый раз, когда кто-то нажимает кнопку модальности, вам все равно придется передавать все данные каждому человеку в атрибут данных. Почему бы просто не построить все различные модалы в цикле for, если это так?

Код DRY - это не то, что у него меньше визуализированного HTML - если вы создаете модалы в цикле for, это все еще DRY-код.