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">

alasql 和 alpine.js：来自 Alpine 外部更新的反应性

alasql and alpine.js: reactivity from updates outside of Alpine

alpine.js

alpinejs