首页 > 解决方案 > 如何在模板中将 Django 查询集呈现为 javascript?

问题描述

所以我正在使用 Django 开发一个类似调度程序的应用程序。我的模板中有fullcalendar-django库,并使用 JavaScript 进行了一些更改。但后来我遇到了一个问题。这是我的意见.py

from .models import NewEvent

def ScheduleMain(request):
    allDays = NewEvent.objects.all()

    return render(request, 'main.html', {'allDays':allDays}

假设我的模型中有两个字段NewEvent- date(DateField) 和 event(CharField)。

这是我模板中的标签。

{% block extrahead %}
<script>
$(document).ready(function() {
    for (each in allDays) {
    $(function() {
        if ($('.fc-day').attr('data-date') == "{{each.date}}") {
        $('.fc-day .fc-day-content').html("{{each.event}}")
        }
    });
    }
});
</script>
{% endblock %}

{% block content %}
...
{% calendar %}
...
{% endblock %}

所以在 中{% calendar %},每个日期都是这样写的:

...
<td class="fc-day" data-date="2020-05-17">
    <div class="fc-day-content">today schedule comes here</div>
</td>
<td class="fc-day" data-date="2020-05-18">
    <div class="fc-day-content">today schedule comes here</div>
</td>
...

如您所见,我正在尝试使用用户输入的任何事件填写“今天的日程安排到这里”。当然,由于模板是预先设计好的,我不能直接对其进行更改。所以我正在尝试使用 JavaScript 来处理它。现在让我们说每天只能有一个事件。
我做错了什么?提前致谢 :)

标签: javascriptdjangofullcalendar

解决方案


用 django 模板语言而不是 javascript 编写 for 循环。

{% block extrahead %}
<script>
$(document).ready(function() {
    {% for day in allDays %}

      $(function() {
        if ($('.fc-day').attr('data-date') == "{{day.date}}") {
          $('.fc-day .fc-day-content').html("{{day.event}}")
        }
      });

    {% endfor %}

});
</script>
{% endblock %}

推荐阅读