来自 % for % 的 Django 模板变量循环到 Javascript

Posted 2023-02-24

【中文标题】来自 % for % 的 Django 模板变量循环到 Javascript

【英文标题】：Django template variables from % for % loop into Javascript来自 % for % 的 Django 模板变量循环到 Javascript

【发布时间】：2011-11-23 19:14:55

【问题描述】：

这是一个遍历记录的 Django 模板。每条记录都包含一个 js 函数填充的 div。为了让 JS 知道该做什么，它需要从每个 for 循环迭代中获取一个变量并使用它。我不确切知道如何实现这一目标或是否可能。也许需要一种不同的方法来记录在单独的 JS 对象实例中触发计时器，我不知道。

--------- 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);

    );

【问题讨论】：

您能否尝试更具体地说明您要完成的工作？

【参考方案1】：

您还可以在代码的 javascript 部分中使用 % for % 循环。如果你在你的 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 "/>。

【参考方案2】：

您可以将 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' 应该是 class 而不是 div 的 id，因为它不是唯一的。

【讨论】：

+1 您的解决方案比我发布的答案要优雅得多。

【参考方案3】：

查看 jQuery 的 .data()

使用它你可以像这样在 DOM 中存储数据

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

然后你就可以像 jQuery 一样访问它了

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