如何将对象数组从基于 django 类的视图发送到我的 index.html 文件

Question

目标：

我想使用 FullCalendar（https://fullcalendar.io/） 显示数据库中的事件对象。FullCalendar 接受事件对象数组作为属性。

我遇到的问题：

我

可以使用事件对象将上下文数据发送回模板，但据我所知，我只能使用 Django 的模板标记系统与数据进行交互。 *编辑：当我用 ptoHistory 替换硬编码数组时，我在 chrome 控制台中收到以下错误：

jquery-3.1.1.min.js：2 未捕获的引用错误：ptoHistory 不是 定义 在 HTMLDocument。（（索引）：141） at j （jquery-3.1.1.min.js：2） at k （jquery-3.1.1.min.js：2）

索引.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 对象，因为它们在模板完成渲染之前就已经执行了。

不过，您仍然可以在javascript中分配python列表，但不能使用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 }};