將{％for％}的Django模板變量循環到Javascript中

這是一個迭代記錄的Django模板。每個記錄都包含一個JS函數填充的div。爲了JS知道該做什麼，它需要從每個for循環迭代中獲取一個變量並使用它。我不知道如何達到或者如果可能。也許需要一個不同的方法來記錄觸發一個單獨的JS對象實例中的計時器，我不知道。將{％for％}的Django模板變量循環到Javascript中

---------- HTML -----------------------

{% 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}); 

    });

來源

2011-09-23 Ska

用jQuery訪問它，你可以嘗試，是一個更具體一點，你想要完成什麼？ – dm03514

您可以輸出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，因爲它不是唯一的。

來源

2011-09-23 16:19:22 JCotton

+1您的解決方案比我發佈的答案更加優雅。 –

謝謝德里克！乾杯。 – JCotton

正是我所需要的 – numerah

你也可以使用{％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 }}"/>。

來源

2011-09-23 16:02:35

退房jQuery的.data()

使用它可以將數據存儲在這樣

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

的DOM，那麼你可以像

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

來源

2011-09-23 19:04:27 Gourneau

將{％for％}的Django模板變量循環到Javascript中

回答

相關問題