Django任务看板项目出现TemplateSyntaxError错误求助

我开发了一个任务管理Django项目，创建了task-board.html页面，想通过拖拽实现任务在「新任务」「进行中」「已完成」三个板块间的状态流转。但访问/taskapp/taskapp-board/路径时触发TemplateSyntaxError，报错信息：Could not parse the remainder: '(status='new')' from 'tasks.filter(status='new')'。

相关代码 #

task-board.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Board</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        .task-section {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
            width: 200px;
            float: left;
        }
    </style>
</head>
<body>

<div class="task-section" id="new-section">
    <h3>New</h3>
    <div class="draggable" id="new">
        {% for task in tasks.filter(status='new') %}
            <div class="task" id="task_{{ task.id }}">{{ task.title }}</div>
        {% endfor %}
    </div>
</div>

<div class="task-section" id="in-progress-section">
    <h3>In Progress</h3>
    <div class="draggable" id="in_progress">
        {% for task in tasks.filter(status='in_progress') %}
            <div class="task" id="task_{{ task.id }}">{{ task.title }}</div>
        {% endfor %}
    </div>
</div>

<div class="task-section" id="completed-section">
    <h3>Completed</h3>
    <div class="draggable" id="completed">
        {% for task in tasks.filter(status='completed') %}
            <div class="task" id="task_{{ task.id }}">{{ task.title }}</div>
        {% endfor %}
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(function() {
        $(".draggable").sortable({
            connectWith: ".draggable",
            update: function(event, ui) {
                var taskId = ui.item.attr("id").split("_")[1];
                var newStatus = ui.item.parent().attr("id").split("-")[0];
                $.ajax({
                    url: "/update_status/" + taskId + "/" + newStatus + "/",
                    type: "POST",
                    dataType: "json",
                    success: function(response) {
                        // Handle success if needed
                    },
                    error: function(error) {
                        // Handle error if needed
                    }
                });
            }
        });
        $(".draggable").disableSelection();
    });
</script>

</body>
</html>

views.py #

from django.shortcuts import render
from .models import Task


def task_board(request):
    tasks = Task.objects.all()
    return render(request, 'taskapp/task_board.html', {'tasks': tasks})

models.py #

from django.db import models


class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    status = models.CharField(max_length=20, choices=[
        ('new', 'New'),
        ('in_progress', 'In Progress'),
        ('completed', 'Completed'),
    ], default='new')

    def __str__(self):
        return self.title

taskapp/urls.py #

from django.urls import path
from .views import task_board

urlpatterns = [
    path('taskapp-board/', task_board, name='task_board'),
]

todo_project/urls.py #

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('accounts.urls')),
    path('taskapp/', include('taskapp.urls')),
]

错误信息 #

TemplateSyntaxError at /taskapp/taskapp-board/

Could not parse the remainder: '(status='new')' from 'tasks.filter(status='new')'

问题原因及解决办法 #

Django模板语法不支持直接调用带参数的方法（比如filter()），不能在模板中写tasks.filter(status='new')这种写法。以下是两种可行的解决方式：

方式一：视图层提前过滤数据（推荐） #

将数据过滤逻辑放在视图中，把不同状态的任务分别查询后传给模板：
修改views.py：

from django.shortcuts import render
from .models import Task


def task_board(request):
    tasks_new = Task.objects.filter(status='new')
    tasks_in_progress = Task.objects.filter(status='in_progress')
    tasks_completed = Task.objects.filter(status='completed')
    return render(request, 'taskapp/task_board.html', {
        'tasks_new': tasks_new,
        'tasks_in_progress': tasks_in_progress,
        'tasks_completed': tasks_completed
    })

修改模板task-board.html的循环部分：

<!-- 新任务板块 -->
<div class="task-section" id="new-section">
    <h3>New</h3>
    <div class="draggable" id="new">
        {% for task in tasks_new %}
            <div class="task" id="task_{{ task.id }}">{{ task.title }}</div>
        {% endfor %}
    </div>
</div>

<!-- 进行中板块 -->
<div class="task-section" id="in-progress-section">
    <h3>In Progress</h3>
    <div class="draggable" id="in_progress">
        {% for task in tasks_in_progress %}
            <div class="task" id="task_{{ task.id }}">{{ task.title }}</div>
        {% endfor %}
    </div>
</div>

<!-- 已完成板块 -->
<div class="task-section" id="completed-section">
    <h3>Completed</h3>
    <div class="draggable" id="completed">
        {% for task in tasks_completed %}
            <div class="task" id="task_{{ task.id }}">{{ task.title }}</div>
        {% endfor %}
    </div>
</div>

方式二：模板中使用regroup标签分组 #

如果想在模板中处理分组，可以用Django内置的regroup标签按状态分组：
视图层仍传递所有任务：

def task_board(request):
    tasks = Task.objects.all()
    return render(request, 'taskapp/task_board.html', {'tasks': tasks})

模板中修改为：

{% regroup tasks by status as task_groups %}

{% for group in task_groups %}
    {% if group.grouper == 'new' %}
    <div class="task-section" id="new-section">
        <h3>New</h3>
        <div class="draggable" id="new">
            {% for task in group.list %}
                <div class="task" id="task_{{ task.id }}">{{ task.title }}</div>
            {% endfor %}
        </div>
    </div>
    {% elif group.grouper == 'in_progress' %}
    <div class="task-section" id="in-progress-section">
        <h3>In Progress</h3>
        <div class="draggable" id="in_progress">
            {% for task in group.list %}
                <div class="task" id="task_{{ task.id }}">{{ task.title }}</div>
            {% endfor %}
        </div>
    </div>
    {% elif group.grouper == 'completed' %}
    <div class="task-section" id="completed-section">
        <h3>Completed</h3>
        <div class="draggable" id="completed">
            {% for task in group.list %}
                <div class="task" id="task_{{ task.id }}">{{ task.title }}</div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
{% endfor %}

两种方式中，方式一更符合Django的MVC架构，数据逻辑集中在视图层，便于后续维护和调试。

内容的提问来源于stack exchange，提问作者Tejas Falke