如何制作alpinejs“重新渲染” htmx交换后的组件

Question

我正在尝试集成Django + Alpinejs + HTMX。一切进展顺利，除非我尝试交换一些已经是Alpinejs组件的一部分的HTML。

如果我仅在第二次交换后正确渲染组件呈现HTML。

例如

<div id="cart-row" x-data="{selectedOrderItem: {{item_id|default:'null'}} }">
    <div id="cart-holder">
        <table id="cart">
            <thead>
                <tr>
                    <th style="width: 10%">CANT</th>
                    <th>Product</th>
                    <th style="width: 15%">TOTAL</th>
                </tr>
            </thead>
            <tbody>
                {% for item in items %}
                <tr 
                    id="product{{item.product.id}}" 
                    :class="{ selectedOrderItem: selectedOrderItem == {{item.id}} }"
                    @click="selectedOrderItem = {{item.id}};"
                >
                    <td>{{item.quantity}}</td>
                    <td>{{item.product.name}}</td>
                    <td>{{item.get_price}}</td>
                </tr>
                {% endfor %}
        
            </tbody>
        </table>
    </div>
    <div id="right-menu">
        <div id="table-buttons" hx-swap-obb="true">
            {% for item in items %}
            <div class="" x-cloak x-show="selectedOrderItem == {{item.id}}">
                <button 
                    class="addButton"
                    hx-trigger="click" 
                    hx-target="#cart-row" 
                    hx-swap="outerHTML" 
                    hx-post="{% url 'add_to_cart' idOrder=order.id idProduct=item.product.id  %}?cartAction=1"
                > 
                    + {{item.id}}
                </button>
            </div>
            {% endfor %}
        </div>
    </div>

，如果我点击“添加到购物车”按钮，则交换了＃cart-row div，但是：class =“ {selectedOrderItem：selectedOrderitem：selectionOrderItem == {{item.id} }}“绑定仅第二次起作用。就像Alpinejs没有意识到内容已交换。

有什么办法可以使整个组件“重新渲染 /重新定位”？ 还是正确交换的正确方法是什么？

编辑：

查看

def add_to_cart(request, idOrder=None, idProduct=None):
    try:
        with transaction.atomic():
            selectedOrderItem, created = OrderItem.objects.get_or_create(order_id=idOrder, product_id=idProduct, defaults={'quantity': 1})
            if not created:
                selectedOrderItem.quantity += 1
                selectedOrderItem.save()

            items = OrderItem.objects.select_related().filter(order_id=idOrder)
            order = get_object_or_404(Order, pk=idOrder)



            elements = []
            # CART
            elements.append(
                render_to_string(
                    'rfidapp/partials/cart_row.html', 
                    request=request, 
                    context={
                        "order": order,
                        "items": items,
                        "selectedOrderItem": selectedOrderItem.id
                    }
                )
            )

            #OOB SWAP TO UPDATE THE TOTAL AT THE BOTTOM LEFT
            elements.append(
                render_to_string('rfidapp/partials/order_total.html', request=request, context={"order": order})
            )

        return HttpResponse("\n".join(elements))
    except Exception as e:
        return HttpResponseBadRequest(f"{e}")

Answer 1

问题在于，您没有在HTMX请求中包含该Alpine.js组件（selectedOrderItem）的一个状态数据。因此，当HTMX交换整个组件时，它将在此过程中丢失selectordordem的值。我们需要将此变量发送到后端，并将其包括在模板中。向HTMX请求添加其他数据的最简单方法是在其上使用X-Model的隐藏输入元素进行同步数据，然后使用 hx-include 将其添加到请求中。将其放置在组件中的任何位置：

<input type="hidden" name="selected_order_item" x-model="selectedOrderItem">

并修改按钮：

<button 
    class="addButton"
    hx-trigger="click" 
    hx-target="#cart-row" 
    hx-swap="outerHTML"
    hx-include="[name='selected_order_item']" 
    hx-post="{% url 'add_to_cart' idOrder=order.id idProduct=item.product.id  %}?cartAction=1"
>

在后端，我们可以在request.post中访问它，例如：

context={
         "order": order,
         "items": items,
         "selectedOrderItem": request.POST.get("selected_order_item", "null")
}

之后在x-data中访问了所选的。订单项目将出现。

x-data="{selectedOrderItem: {{selectedOrderItem}} }"