Django+HTMX添加订单项后forloop计数器无法动态更新求助

我跟着教程做了一个用HTMX添加订单项的表单，每个新订单项用div行展示而非表格行。我给每行加了forloop计数器，但添加新项后计数器不会动态更新，只有刷新页面才会变。

相关代码如下：

order-create-update.html #

{% extends 'partials/base.html' %}

{% block content %}

<style>
  .orderitem-form {
    border-bottom: 1px solid black;
  }
</style>

<div class="container-fluid" style="margin-top:80px">
    {% include 'orders/order_form_full.html' %}

<hr>   
  <div class="row" style="margin-bottom:5px; border-bottom-style:solid; border-bottom-width:1px">
      <div class="col-1" style="font-weight: bold">Item #</div>
      <div class="col-2" style="font-weight: bold">Material Category</div>
      <div class="col-2" style="font-weight: bold">Material Subcategory</div>
      <div class="col-4" style="font-weight: bold">Material</div>
      <div class="col-1" style="font-weight: bold">Quantity</div>
      <div class="col-1" style="font-weight: bold">Price/Unit</div>  
      <div class="col-1" style="font-weight: bold">Action</div>  
  </div>

  {% for orderitem in object.get_orderitems_children %} 
  {% include "orders/order_item_inline.html" with object=orderitem %}  
  {% endfor %}

  {% if new_orderitem_url %}  
  <div id="orderitem-create"></div>  
  {% endif %}
  <button type="button" class="btn btn-secondary" hx-get="{{ new_orderitem_url }}" hx-trigger="click" hx-target="#orderitem-create" hx-swap="beforeend">Add order item</button>                                                                                                                                                                                                                                                                               
</div>
{% endblock %}

order_item_inline.html #

<div id="orderitem-{{ object.id }}">
    <div class="row mt-1">        
        <div class="col-1">{{ forloop.counter }}</div>        
        <div class="col-2">{{ object.material_category }}</div>
        <div class="col-2">{{ object.material_subcategory }}</div>
        <div class="col-4">{{ object.material }}</div>
        <div class="col-1">{{ object.quantity_ordered }}</div>
        <div class="col-1">{{ object.material.price }}</div>  
        <div class="col-1"> 
            <button type="button" class="btn btn-secondary btn-sm" hx-trigger="click" hx-get="{{ object.get_hx_edit_url }}" hx-target="#orderitem-{{ object.id }}">Edit</button>
        </div>           
    </div>
</div>

原因说明 #

Django的forloop.counter是服务器渲染时生成的静态值，HTMX异步加新项时，服务器不知道页面已有多少项，所以新项序号不对，旧项序号也不会自动更新。

下面给两种实用解决办法：

方法1：前端JS动态更新序号 #

用HTMX的事件监听，新项添加完成后重新计算所有序号。

1. 在order-create-update.html的{% block content %}末尾加一段脚本：

<script>
// 监听HTMX的插入完成事件
document.addEventListener('htmx:afterSwap', function(event) {
  // 只处理订单项创建的目标区域
  if (event.target.id === 'orderitem-create') {
    // 获取所有序号列
    const itemNumbers = document.querySelectorAll('.order-item-number');
    // 遍历更新序号
    itemNumbers.forEach((el, index) => {
      el.textContent = index + 1;
    });
  }
});
</script>

2. 修改order_item_inline.html，给序号列加统一类名：

<div id="orderitem-{{ object.id }}">
    <div class="row mt-1">        
        <div class="col-1 order-item-number">{{ forloop.counter }}</div>
        <!-- 其他内容不变 -->
    </div>
</div>

这种方法不用改后端，纯前端处理，简单直接，适合大多数场景。

方法2：后端传初始序号+前端统一更新 #

如果想让新项从后端拿到初始正确序号，可以在请求新项时传当前项数，后端计算后返回。

1. 修改添加按钮，用hx-vals传当前项数：

<button type="button" class="btn btn-secondary" 
        hx-get="{{ new_orderitem_url }}" 
        hx-trigger="click" 
        hx-target="#orderitem-create" 
        hx-swap="beforeend"
        hx-vals='{"current_count": document.querySelectorAll(".order-item-number").length}'>
  Add order item
</button>

2. 后端视图接收参数，计算新序号：

def create_order_item(request):
    # 原有创建逻辑不变
    current_count = int(request.GET.get('current_count', 0))
    new_item_number = current_count + 1
    # 把序号传给模板
    return render(request, 'orders/order_item_inline.html', {
        'object': new_orderitem,
        'item_number': new_item_number
    })

3. 修改order_item_inline.html，用传递的序号：

<div id="orderitem-{{ object.id }}">
    <div class="row mt-1">        
        <div class="col-1 order-item-number">{{ item_number|default:forloop.counter }}</div>
        <!-- 其他内容不变 -->
    </div>
</div>

注意：这种方法还是要配合方法1的JS逻辑，因为如果删除项后再添加，仅靠后端传的current_count可能不准，需要前端统一重新计算。

额外补充：删除项后的序号更新 #

如果后续要加删除功能，同样要在删除后更新序号。可以扩展JS脚本，监听所有订单项相关的请求完成事件：

document.addEventListener('htmx:afterRequest', function(event) {
  // 检查请求是否涉及订单项的增删改
  if (event.detail.target.id.includes('orderitem-') || event.target.id === 'orderitem-create') {
    const itemNumbers = document.querySelectorAll('.order-item-number');
    itemNumbers.forEach((el, index) => {
      el.textContent = index + 1;
    });
  }
});

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