使用Django与HTMX时无法更新两个元素的问题求助

核心思路是利用HTMX的OOB（Out of Band）交换，在操作（添加/移除车辆）后同时更新页面上的两个列表容器。以下是具体实现步骤：

1. 给列表容器添加唯一ID #

在页面模板中，给左侧“未关联车辆”和右侧“已关联车辆”的容器分别设置唯一ID，方便HTMX定位替换：

<!-- 左侧未关联车辆容器 -->
<div id="available-cars-container">
    {% include 'includes/available_cars.html' %}
</div>

<!-- 右侧已关联车辆容器 -->
<div id="associated-cars-container">
    {% include 'includes/associated_cars.html' %}
</div>

2. 拆分列表为独立模板片段 #

将左右列表的HTML抽成独立的模板片段（比如available_cars.html和associated_cars.html），每个片段的根元素加上hx-swap-oob="true"属性，标记为OOB交换内容：

available_cars.html 片段示例： #

<div id="available-cars-container" hx-swap-oob="true">
    <table>
        <thead>
            <tr><th>未关联车辆</th></tr>
        </thead>
        <tbody>
            {% for car in available_cars %}
            <tr>
                <td>{{ car.name }}</td>
                <td>
                    <button hx-post="{% url 'add_car_to_city' current_city.id car.id %}">
                        添加到{{ current_city.name }}
                    </button>
                </td>
            </tr>
            {% empty %}
            <tr><td>无可用车辆</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

associated_cars.html 片段示例： #

<div id="associated-cars-container" hx-swap-oob="true">
    <table>
        <thead>
            <tr><th>{{ current_city.name }}关联车辆</th></tr>
        </thead>
        <tbody>
            {% for car in associated_cars %}
            <tr>
                <td>{{ car.name }}</td>
                <td>
                    <button hx-post="{% url 'remove_car_from_city' current_city.id car.id %}">
                        移除
                    </button>
                </td>
            </tr>
            {% empty %}
            <tr><td>无关联车辆</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

3. 调整视图函数返回OOB内容 #

在处理添加/移除车辆的视图中，完成数据库操作后，重新查询两个列表的最新数据，然后同时渲染两个OOB模板片段返回：

添加车辆的视图示例： #

from django.shortcuts import get_object_or_404, render
from .models import City, Car, CarPool

def add_car_to_city(request, city_id, car_id):
    city = get_object_or_404(City, id=city_id)
    car = get_object_or_404(Car, id=car_id)
    
    # 创建车辆与城市的关联
    CarPool.objects.create(city=city, car=car)
    
    # 查询更新后的数据
    available_cars = Car.objects.exclude(carpool__city=city)
    associated_cars = Car.objects.filter(carpool__city=city)
    
    # 返回两个OOB片段，HTMX会自动替换对应ID的容器
    response = render(request, 'includes/available_cars.html', {
        'available_cars': available_cars,
        'current_city': city
    })
    response.content += render(request, 'includes/associated_cars.html', {
        'associated_cars': associated_cars,
        'current_city': city
    }).content
    return response

移除车辆的视图示例： #

def remove_car_from_city(request, city_id, car_id):
    city = get_object_or_404(City, id=city_id)
    car = get_object_or_404(Car, id=car_id)
    
    # 删除车辆与城市的关联
    CarPool.objects.filter(city=city, car=car).delete()
    
    # 查询更新后的数据
    available_cars = Car.objects.exclude(carpool__city=city)
    associated_cars = Car.objects.filter(carpool__city=city)
    
    # 返回两个OOB片段
    response = render(request, 'includes/available_cars.html', {
        'available_cars': available_cars,
        'current_city': city
    })
    response.content += render(request, 'includes/associated_cars.html', {
        'associated_cars': associated_cars,
        'current_city': city
    }).content
    return response

4. 关键注意事项 #

• 确保容器ID在页面中唯一，HTMX依赖ID定位替换元素
• 视图返回的两个OOB片段会被HTMX分别解析，自动替换页面上对应ID的容器
• 验证查询数据的逻辑：添加车辆后，左侧列表需排除已关联当前城市的车辆；移除后，右侧列表需移除对应车辆

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