djangoクラスベースのビューからindex.htmlファイルにオブジェクトの配列を送信するにはどうすればいいですか？

Question

目標：

私は、データベースからイベントオブジェクトを表示するためにFullCalendar（https://fullcalendar.io/）を使用します。 FullCalendarはイベントオブジェクトの配列をプロパティとして受け取ります。

私がいる問題：

を、私は私の知る限り、私は唯一のDjangoのテンプレートタグシステムを使用して、データと対話することができます知っているようにイベントオブジェクトをバックテンプレートにコンテキストデータを送ることができますが。 *編集：私はptoHistoryでハードコードされ、配列を交換するとき、私はクロームコンソールで次のエラーが表示されます。

jquery-3.1.1.min.js:2 Uncaught ReferenceError: ptoHistory is not defined at HTMLDocument. ((index):141) at j (jquery-3.1.1.min.js:2) at k (jquery-3.1.1.min.js:2)

のindex.html：

{% extends 'base.html' %} 

{% block content %} 

//ACCESSING THE CONTEXT DATA LIKE THIS WORKS BUT I CAN'T USE ptoHistory IN MY FULLCALLENDAR SCRIPT 
{% for history in ptoHistory %} 
<li>{{obj.leave_type}}</li> 
{% endfor %} 

<div class="container"> 
    <div id="calendar"> 
    <!-- Calendar is injected here --> 
    </div> 

<!----------------------- SCRIPTS -----------------------------> 
<script> 

$(document).ready(function() { 

    $('#calendar').fullCalendar({ 
    defaultView:'month', 
    editable: true, 
    // MY ARRAY OF OBJECTS WILL REPLACE THIS HARDCODED ARRAY 
    events: [ 
     { 
     title: 'All Day Event', 
     start: '2017-01-12', 
     }, 
     { 
     title: 'Meeting', 
     start: '2017-01-13T10:30:26', 
     end: '2014-06-13T12:30:00' 
     }, 
    ], 


    }); 

}); 

</script> 


{% endblock content%} 

IndexView.py：

class IndexView(FormView): 
    template_name = 'accounts/index.html' 
    form_class = PtoRequestForm 
    success_url = 'login/' 

    def form_valid(self, form): 
     form.save() 
     return super(IndexView, self).form_valid(form) 

    def get_context_data(self, **kwargs): 
     context = super(IndexView, self).get_context_data(**kwargs) 
     context['ptoHistory'] = PtoHistory.objects.all() 
     print(context['ptoHistory']) 
     return context 

誰かが私を正しい方向に向けることができますか？

Answer 1

あなたはそうです、それは動作しません。 Djangoテンプレートシステムは、テンプレートがレンダリングを終了する前に実行されるため、Pythonオブジェクトを処理することができます。

あなたはまだPythonのリストをjavascriptに割り当てることができますが、pythonのオブジェクトではなくjsonの文字列で割り当てることができます。このソリューションは、基本的にはビューで必要なものだけをvalues()を使用して作成します。 PtoHistoryにはどのフィールドが必要かわかりませんが、次のようにすることができます。

# views.py 
import json 
def get_context_data(self, **kwargs): 
    context = super(IndexView, self).get_context_data(**kwargs) 
    ptoHistory = json.dumps(list(PtoHistory.objects.values())) 
    # or do this if you only need several fields' value 
    # ptoHistory = json.dumps(list(PtoHistory.objects.values('field1', 'field2'))) 
    context['ptoHistory'] = ptoHistory 

    return context 

// in javascript 
$(document).ready(function() { 

    $('#calendar').fullCalendar({ 
    defaultView:'month', 
    editable: true, 
    var histories = {{ ptoHistory|safe }};