Question

我有一个Dart + Web UI应用程序首先需要从本地IndexedDB存储加载数据。 IndexedDB API是异步的，因此我将在加载数据时收到回调。在我的数据库首次打开并准备就绪之前，我不想显示任何UI元素。

在显示UI之前，如何等待数据库初始化？

Answer 1

我在我的项目中使用Web UI方式：

...
<body>
  <template if="showApplication">
    <span>The app is ready.</span>
  </template>
</body>
...

@observable bool showApplication = false;

main() {
  // Initialize...
  window.indexedDB.open(...).then((_) {
    showApplication = true;
  });
}

这还有一个额外的好处：单独的代码/ Web组件也可以在依赖数据库连接等之前检查应用程序状态。

Answer 2

使用body隐藏visibility:hidden标记：

<body style="visibility:hidden">
  <!-- content -->
</body>

然后在你未来的then（）回调中显示它

window.indexedDB.open(dbName, 
  version: version, 
  onUpgradeNeeded: createObjectStore).then(handleDBOpened);

handleDBOpened(..) {
  query('body').style.visibility = "visible"; // <-- show the body tag
}

如何在我的应用初始化后显示我的UI？

2 个答案: