HTMX + AlpineJS + Tailwind。我想我想多了一些很简单的东西...
我的应用程序有一个下拉列表,在从下拉列表中选择后,HTMX会查询后端有关所选记录的一些信息,包括是否可以删除它。在后端确认所选记录可以安全删除之前,不要显示DELETE按钮,这一点非常重要。
在Alpine.js中,我们定义了x-data="{showDelete : false}"
,并在主下拉列表中的选择发生变化时将其重置为false。我们的目标是在后端确认(通过HTMX)删除操作可以时将其重置为TRUE。
页面的骨骼如下所示:
<div x-data="{showDelete : false}"> <!-- goal is to change this -->
<select x-model="currentRecord" id="recordSelector" name="recordId"
x-on:deleteOK="showDelete = true"
x-on:change="showDelete = false"
hx-get="/api/records/deletestatus" hx-trigger="click changed" hx-target="#deleteable" hx-swap="outerHTML"
hx-get="/api/records/list" hx-trigger="load">
<!-- htmx fills in all the record options below on page load -->
<option value="-1" id="recordOption">Choose a record for more info...</option>
</select>
<!-- this div returned by HTMX when select option changes -->
<div id="deleteable" :class="showDelete ? 'inline' : 'hidden'">
<button type="button" id="deleteButton" hx-post="/api/records/78453/delete">Delete Record</button>
</div>
</div>
<script>
// this function does run, due to HTMX's HX-Trigger-After-Swap header
// but cannot change the showDelete paramter above
document.body.addEventListener('deleteConfirmed', function(evt) {
console.log(evt);
document.getElementById('recordSelector').dispatchEvent(new CustomEvent('deleteOK'));
// Alpine.data('showDelete', () => {showDelete = true});
})
</script>
#deleteable
div是HTMX响应,其中还包括设置为deleteConfirmed
的头HX-Trigger-After-Swap
。(通过控制台输出确认),但没有触发select
元素中的deleteOK
函数。我尝试直接使用Alpine.data()
更改数据值,但无法使其生效。我认为使用一个单独的函数可能是矫枉过正,它应该是很容易改变一个阿尔卑斯山的数据点,对不对?
注意事项:如果HTMX返回的是div
,我们为什么还需要showDelete
呢?只要返回一个空的div
就行了,对吗?问题是当返回一个可删除的记录,并且按钮是可见的时候--我们仍然需要删除按钮的选项。例如,当选择一个新记录时,但在返回新的HTMX响应之前,我们会有一个孤立的DELETE按钮,现在这个按钮特别危险,因为已经选择了一个可能不安全删除的新记录。(是的,我们验证了服务器上的所有输入,但仍然不希望有一个DELETE按钮)。
1条答案
按热度按时间nbysray51#
Alpine中的事件名称必须全部小写https://alpinejs.dev/directives/on
例如:
然后使用
new CustomEvent('delete-ok')
触发事件就我个人而言,我会避免所有这些操作,而是在更新HTML时直接在服务器上修改
x-data
,将showDelete
更改为true
:我的理解是,您已经更新了这部分代码以包含按钮html,因此您还可以更改x-data值。