alasql和Alpine. js: Alpine之外更新的反应性

Question

我想使用Alpine.js，同时尽可能多地保持alasql.js内部的应用程序状态。问题是Alpine.start()之后加载的数据没有出现在x-for部分。如果有一种方法来强制浪费的完全刷新(不运行Alpine.start()再次)，我会有兴趣知道。我尝试了几次customEvents解决方案，但没有工作。

还有其他方法可以使这样的工作吗?不改变太多的架构…?我很好奇/固执

await fetch(`${API_domain}?playlist=` + playlist)
.then(response => response.json())
.then(data => {
alasql('ATTACH localStorage DATABASE RuntimeDB')
alasql('SET AUTOCOMMIT ON')
alasql(`DELETE from videos where webpage_url = "${data.webpage_url}"`)
alasql(`INSERT INTO videos SELECT * FROM ?`, [[data]])
app.updateView()
})

<div x-data="{
playlistToAdd: '',
async submit($event) {
await app.fetchPlaylist(this.playlistToAdd)
}
}">
<label for="add_new">Add New Playlist or Channel:</label>
<input type="text" name="add_new" id="add_new" x-model="playlistToAdd"
placeholder="https://www.youtube.com/playlist?list=PL8A83124F1D79BD4F" @keyup.enter="submit" />
<button type="button" @click="submit">Submit</button>
</div>
<div x-data>
<template x-for="(pl, index) in app.view.table" :key="index">
<div>
<details x-html="`<summary><a href='${pl.webpage_url}'>${pl.title}</a> by
<a href='${pl.channel_url}'>${pl.uploader}</a> (watched ${pl.playlist_count-pl.entries.length} of ${pl.playlist_count}; ${(pl.playlist_count-pl.entries.length)/pl.playlist_count*100.0}%)</summary>
<template x-for='(v, index) in pl.entries' :key='index'>
<div><span x-text='v.title'></span></div>
</template>
`"></details>
</div>
</template>
</div>

完整代码在这里:https://github.com/chapmanjacobd/lb-lite/tree/main/client

Answer 1

您注意到app.view.table没有反应。为此，您可以使用Alpine.store()，它也可以从外部访问和响应:

Alpine.store('table', [])
updateView: function () {
Alpine.store('table', alasql('select * from videos'))
}

在模板中使用$store.table:

<template x-for="(pl, index) in $store.table" :key="index">