Переменные шаблона Django из цикла {% for%} в Javascript

Question

Это шаблон Django, повторяющий записи.Каждая запись содержит div, который заполняет функция JS. Чтобы JS знал, что делать, ему нужно получить переменную для каждой итерации цикла и использовать ее.Я не знаю точно, как этого достичь или возможно ли это.Возможно, нужен другой подход, когда запись запускает таймер в отдельном экземпляре объекта JS, я не знаю.---------------

{% for match in upcoming_matches %}
...

<tr>
<td> Match title </td>
<td> Match time </td>
<td> Starts in: </td>
<tr>

<tr>
<td> {{ match.title }} </td>
<td> {{ match.start_time }} </td>
<td> <div id="matchCountdown"/></td>
<tr>

...

{% endfor %}

------------ JS ---------------------------

$(function () {

        var start_date = {{ match.start_date }}; // Obviously I can't access vars from for loop, I could access upcoming_matches but not the ones from for loop


        var matchDate = new Date(start_date.getTime() 

     $('#matchCountdown').countdown({until: matchDate});

    });

Answer 1

Вы можете вывести start_date в качестве атрибута matchCountdown.Затем в вашем JavaScript выберите его, обработайте и выведите с помощью плагина Countdown.

Код шаблона: <td><div class="matchCountdown" start="{{ match.start_date }}" /></td>

JavaScript:

$('.matchCountdown').each(function() {
    this = $(this);
    var start_date = this.attr('start');
    var matchDate = new Date(start_date).getTime();
    this.countdown({until: matchDate});
});

Для этого метода требуется толькоодин цикл в коде шаблона и один цикл в Javscript для поиска и включения элементов.Также следует отметить, что 'matchCountdown' должен быть классом , а не id элемента div, поскольку он не уникален.

Answer 2

Вы также можете использовать цикл {% for%} в своей части кода javascript.Если вы напишите это в своем HTML-шаблоне:

<script type="text/javascript">
    $(function() {
        {% for match in upcoming_matches %}
            var match_date_{{ match.id }} = new Date({{ match.start_date }}).getTime();
            $('#matchCountdown_{{ match.id }}').countdown({until: match_date_{{ match.id }});
        {% endfor %}
    });
</script>

Кроме того, <div id="matchCountdown"/> станет <div id="matchCountdown_{{ match.id }}"/> в этом случае.

Answer 3

Проверьте jQuery's .data ()

Используя его, вы можете хранить данные в DOM следующим образом

<div id="myDiv" data-somedata="myimportantdata"></div>

тогда вы можете получить к нему доступ с помощью jQuery, например

$("#myDiv").data("somedata");