1

djangoでスポーツアプリを作成しています。試合ごとのカウントダウン付きの試合リストを表示したいのですが。

今のところ、カウントダウンは1つだけです。私はこのJqueryカウントダウンを使用します：http：//keith-wood.name/countdown.html （それは新年に行きます）。一致を表示するループがあります。だから問題は、カウントダウンをループに挿入して、オブジェクトのDateTimeに「一致」させるにはどうすればよいですか？

これが私のテンプレートです：

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style type="text/css">@import "/Users/marc-a   antoine.lacroix/Desktop/Jquery/jquery.countdown.package-1.6.0/jquery.countdown.css";</style>

<script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown.js">    </script>
<script language="javascript">

$(document).ready(function(){

var newYear = new Date(); 
newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1); 
$('#defaultCountdown').countdown({until: newYear}); 

});
</script>

</head>
<body>

<div style="float:left">
{% for match in matches %}
<div>    
    <p>{{ match }}</p>
    <p> {{match.real_start}} <p>
    <a href="{{ match.get_absolute_url_grille }}">Go</a>
   </div>
{% endfor %}
</div>


<div id="defaultCountdown"> </div>


</body>

「一致」は、すべての一致を含むリストです。「real_start」は、オブジェクトの「一致」の日時です。

私のviews.pyは単純です：

 def page(request):
     matches = Match.live_matches.all()

     return render_to_response('myhtml.html', {'matches': matches}, context_instance=RequestContext(request))

そのため、「real_start」DateTimeをカウントダウンにインポートする方法と、このカウントダウンをループに挿入する方法がわかりません。

これが私の現在のコードです：

<script language="javascript">


  $(function(){
  $('.match_wrap').each(function(){
   var match_start=$(this).data('match_start');      
   $(this).find('.matchTimer').countdown({until: match_start});
  });
  })
</script>

</head>
<body>

 <div style="float:left">
 {% for match in matches %}
 </br></br>
 <div class="match_wrap" data-match_start="{{ match.real_start|date:"M j, Y" }}">     
    <p>{{ match }}</p>
    <p> {{match.real_start}} <p>
    <div>
        <ul>
        {% for team in match.teams %}
            <li>
                <img src="{{ team.logo.url }}">
            </li>
        {% endfor %}
        </ul>
    </div>
    <a href="{{ match.get_absolute_url_grille }}">Go</a>
    <div class="matchTimer"> </div>
    </div>
{% endfor %}
</div>
</br></br>

私も試しました： 

 <head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.countdown.js"></script>


 <script language="javascript">


  $('.match_countdown').each(function() {
  var self = $(this),
    date_string = self.attr('data-date'),
    date = new Date.parse(date_string);
  self.countdown({until: date});
});
</script>

</head>
<body>

<div style="float:left">
{% for match in matches %}
</br></br>
<div class="match_countdown" data-date="{{ match.real_start|date:'M j, Y' }}"></div>  
    <p>{{ match }}</p>
    <p> {{match.real_start}} <p>
    <div>
        <ul>
        {% for team in match.teams %}
            <li>
                <img src="{{ team.logo.url }}">
            </li>
        {% endfor %}
        </ul>
    </div>
    <a href="{{ match.get_absolute_url_grille }}">Go</a>
</div>
{% endfor %}
</div>

4

2 に答える 2

3

charlietflの回答に似ていますが、jsは正しい日付を解析します。

{# template #}
{% for match in matches %}
    <div>    
        <p>{{ match }}</p>
        <p> {{match.real_start}} <p>
        <a href="{{ match.get_absolute_url_grille }}">Go</a>
        <div class="match_countdown" data-date="{{ match.real_start|date:'M j, Y' }}"></div>
    </div>
{% endfor %}

そしてjs：

$('.match_countdown').each(function() {
    var self = $(this),
        date_string = self.attr('data-date'),
        date = new Date(date_string);
    self.countdown({until: date});
});

ここ（http://jsfiddle.net/miki725/MQcYw/1/）js jsfiddleは、ソリューションを示しています。

于 2012-10-15T12:35:05.480 に答える
2

インスタンスごとに異なるデータを必要とする多くの要素でプラグインを呼び出す必要がある場合は常に、関連する要素をループして、ループ内から各インスタンスを呼び出すのが最も簡単です。

このようなものは簡単に実装できるはずです。

HTML

{% for match in matches %}
<div class="match_wrap" data-match_start="{{match.startFormattedToCountDownPlugin}}">    
    <p>{{ match }}</p>
    <p> {{match.real_start}} <p>
    <a href="{{ match.get_absolute_url_grille }}">Go</a>
   </div>
   <div class="matchTimer"> </div>
</div>
{% endfor %}

JS

$(function(){
   $('.match_wrap').each(function(){
      var match_start=new Date.parse($(this).data('match_start')); 
       $(this).find('.matchTimer').countdown({until: match_start});
   });
})
于 2012-10-15T12:20:50.780 に答える