javascriptセクションでdjangoテンプレートの変数を使用するにはどうすればよいですか？

Question

私はちょっとした仕事をしていて、無限のスクロールのためのJavaScriptセクションをいくつか入れました。

ここは私のhtmlファイルの一部です。

{% for d in data reversed %} 
<form method="POST" action="/SNS/{{d.id}}/"> 
{% csrf_token %} 

<li> 
<h5>{{d.content}}</h5> 
<p> 
    {{d.date}} 
    <button type="submit" name="delete" value="delete">X</button> 
</P> 
</li> 
</form> 

{% endfor %} 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="script.js"></script> 

<script type="text/javascript"> 
    var d = "{{data}}"; 
    $(window).scroll(function() { 
     if($(window).scrollTop() == $(document).height() - $(window).height()) { 
      alert('End of Window'); 


     } 
    }); 

</script> 

データはHTMLパーツで表示されます。

ただし、問題は次のとおりです。

スクリプトセクションでデータ変数を使用します。

だから私はそのようなvar dを宣言しますが、うまくいきませんでした。

JavaScriptでdjangoのvarを使用するにはどうすればよいですか？

---

に編集：私は最終的にやりたいことはさえずりのような無限スクロールがある 。

data sがデシベルであり、それらのいくつかの最初のページのロード。

ユーザーがページを下にスクロールすると、残りのページの一部が読み込まれます。data ..などです。

私はイベントを下にスクロールするためのコードを書いた、と私はあなたがしようとしている残りのdata

Answer 1

テンプレートを簡単なリクエストとajaxコールに分けることができます。たとえば ：

ビュー機能：

from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger 

def datalist_ajax(request): 
data = Data.objects.all().order_by('created') 
per_page = 1 
paginator = Paginator(data,per_page) 
if request.is_ajax(): 
    current_page = request.GET.get('page',1) 
    try: 
     data = paginator.page(current_page) 
    except PageNotAnInteger: 
    # If page is not an integer, deliver first page. 
     data = paginator.page(1) 
    except EmptyPage: 
    # If page is out of range (e.g. 9999), deliver last page of results. 
     data = None 
    return render(request,'data/list_ajax.html',{'data':data}) 
else: 
    return render(request,'data/list.html',{'data':paginator.page(1)}) 

list_ajax.html：

{% if data %} 
    {% for d in data reversed %} 
     <li> 
     <form method="POST" action="/SNS/{{d.id}}/"> 
     {% csrf_token %} 

     <h5>{{d.content}}</h5> 
     <p> 
      {{d.date}} 
      <button type="submit" name="delete" value="delete">X</button> 
     </P> 

     </form> 
     </li> 
    {% endfor %} 
{% else %} 
    That is all 
{% endif %} 

リスト。HTML：するlist.html で

<ul class="data-list"> 
     {% for d in data reversed %} 
     <li> 
     <form method="POST" action="/SNS/{{d.id}}/"> 
     {% csrf_token %} 


     <h5>{{d.content}}</h5> 
     <p> 
      {{d.date}} 
      <button type="submit" name="delete" value="delete">X</button> 
     </P> 

     </form> 
     </li> 
     {% endfor %} 
    </ul> 

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
     <script src="script.js"></script> 

     <script type="text/javascript"> 
      var current_page = 1; 
       $(window).scroll(function() { 
        if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
         current_page += 1; 
         $.ajax({ 
          method: 'get', 
          url: '/data/', 
          data: { 
           'page': current_page 
          } 
         }).done(function (data) { 
          $('.data-list').append(data) 
          console.log(data); 
         }); 
        } 
       }); 

     </script> 

あなたが任意の別の "親" テンプレートを拡張することができます。 list_ajax.htmlで拡張する必要はありません。ここ

Answer 2

方法は、文字列と整数のような単純なデータのために動作しますが、のような、より複雑なデータ型では動作しません示す必要がありますリストと辞書。これらは、JSONフィルタを使用してJavaScriptオブジェクトに変換する必要があります。

これは、ユーザーから提供されたデータをJavaScriptに渡す場合、クロスサイトスクリプティング（XSS）攻撃のセキュリティリスクも発生します。 Djangoの問題追跡ツールでthis discussionを読んで、その使い方をいつ、どのように使うべきかを知るために（XSSの脆弱性コードの例を含む）読むことをお勧めします。

あなたはPythonでjsonモジュールを使用して、テンプレートにデータを渡すことによってJSONにデータを変換することができます：

template.render(Context("data": data, "jsdata": json.dumps(data))) 

それとも、むしろ、テンプレート内JSONをフィルタリングするために拡張機能を使用することができますデータを2回渡すよりも

Answer 3

私は通常、何をすべきかです：HTMLで

models.py

class MODEL(models.Model): 
    field1 = models.CharField() 
    field2 = models.TextField() 
    field3 = models.DateField() 

    def as_dict(self): 
     return {'id':self.id, 'field1': self.field1, 'field2': self.field2, 'field3': self.field3} 

views.py

import json 
from django.core.serializer.json import DjangoJSONEncoder 

#... inside some view ... 
    context = {} 
    json = [ q.as_dict() for q in SOMEQUERYSET ] 
    context['json'] = json.dumps(json, cls=DjangoJSONEncoder) 

Javascriptを

var d = {{json|safe}};