好的,我将回答我自己的问题。
我认为添加项目时是否触发了 IndexedDB 事件的答案是否定的。我想被证明是错误的,但我看到的唯一更新事件是版本更新,而不是添加的内容更新。我不应该对此感到惊讶。
无论如何,我发现使用下面的代码,不出所料,工作,虽然我更喜欢使用由 IndexedDB 或其他东西生成的事件,但你并不总是得到你想要的。这是使用 Lawndart 完成的,它在大多数现代浏览器中有效地使用 IndexedDb。
...
//define an observable to hold the list
@observable List<String> cardnames;
static const INTERVAL = const Duration(seconds: 1);
Timer poller;
...
poller = new Timer.periodic(INTERVAL, pollDB);
...
void pollDB(Timer timer) {
Store db = new Store("magic-card-collection", "magic-card");
db.open().then((_) {
db.keys().forEach((item) {
if(!cardnames.contains(item)) {
cardnames.add(item);
print("added " + item);
}
});
});
}
现在,每次将项目添加到卡片名称时,视图都会随着更多内容添加到数据库而动态更新。所以我现在可以从任何外部来源添加卡片,并且视图将在几秒钟内更新。
更新:
在 Seth Ladd 和 Polymer 文档的帮助下,我发现最好的方法不是轮询数据库,而是让一个中央数据库存储包含在一个元素中,让其他元素在执行某些操作时触发自定义事件,传递信息作为触发事件的一部分,并让控制器元素侦听这些事件并添加到商店并更新 UI。例如,创建一个元素来收集要放入数据库的数据,并在完成收集该信息时触发一个事件。
<polymer-element name="collect-data">
<template>
<div>
<button on-click="{{save}}">Ok</button>
</div>
</template>
<script type="application/dart" src="collectdata.dart"></script>
</polymer-element>
收藏家飞镖文件
@CustomTag('collect-data')
class CollectData extends PolymerElement {
CollectData.created() : super.created();
void save(Event e, var detail, var target) {
fire("update", detail: "hello");
}
}
控制器
<polymer-element name="app-controller">
<link rel="import" href="collectdata.html">
<template>
<div>
<collect-data on-update="{{save}}"></collect-data>
</div>
</template>
<script type="application/dart" src="appcontroller.dart"></script>
</polymer-element>
应用程序控制器 dart 文件
@CustomTag('app-controller')
class AppController extends PolymerElement {
AppController.created() : super.created();
void save(Event e) {
var data = e.detail;
//update your db here, which would, if you had one, include updating an observable list
...
}
}
需要注意的重要事项是方法
fire('update', detail: ...);
我认为,细节可以是任何有效的对象。我知道您可以将字符串或字典传递给它。另一部分是
<collect-data on-update="{{save}}"></collect-data>
触发事件的东西称为更新,侦听器在更新时侦听。我会把它留给你来弄清楚这里的模式要求。
但是,数据库仍然没有发出我目前知道的更改事件。