Question

我目前有一个PolymerElement，它绑定到一个可观察列表，并使用

<template repeat="{{cardnames}}">
    <div>{{ }}</div>
</template>

到目前为止，这么好。卡片名是从IndexDB商店填充的，我正在使用lawndart。它适用于在启动时获取所有项目，但是当我从一个单独的PolymerElement向数据库添加项目时，无法从其他PolymerElement更新卡片名列表。因此，我提出的一个想法，没有将所有这些逻辑放在同一个PolymerElement中，让其中包含卡片名称的那个监视数据库中的更改，并在发生更改时从那里更新列表。我的问题是我不知道这是否已经是一个可以听到的变化事件，我希望有人可以启发我，如果有，在哪里找到它或告诉我该怎么做。

粗略的我可以运行一个后台隔离过程来检查更改，或某种类型的计时器，但这看起来很笨拙，成本高，复杂性增加，我可以不用。

由于

Answer 1

好的我会回答我自己的问题。

我认为如果在添加项目时触发了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文档的帮助下，我发现最好的方法不是轮询db，而是让一个中心数据库存储包含在一个元素中，让其他元素在它们执行时触发自定义事件某些东西，将信息作为被触发事件的一部分传递，并让控制器元素侦听这些事件，并且都添加到商店并更新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>

app控制器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>

触发事件的事件会调用它更新，侦听器会监听on-update。我会留给你在这里找出模式要求。

然而，数据库仍然不会发出我目前所知的已更改事件。

如何监视indexeddb存储以进行内容更改？

1 个答案: