0

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

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

到目前为止，一切都很好。卡名是从 IndexDB 存储中填充的，我为此使用了草地。它适用于在启动时获取所有项目，但是当我从单独的 PolymerElement 将项目添加到数据库时，无法从另一个 PolymerElement 更新卡名列表。因此，我提出的一个想法是，在没有将所有这些逻辑放入同一个 PolymerElement 的情况下，让其中包含卡名的那个来监视数据库的更改，并在发生更改时从那里更新列表。我的问题是我不知道这是否已经是一个可以收听的更改事件，我希望有人能告诉我是否有，以及在哪里可以找到它或告诉我如何去做。

粗略地说，我可以运行一个后台隔离进程来检查更改，或者运行某种计时器，但这似乎很笨拙、成本高昂，而且我可以不用增加复杂性。

谢谢

4

1 回答 1

0

好的，我将回答我自己的问题。

我认为添加项目时是否触发了 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>

触发事件的东西称为更新，侦听器在更新时侦听。我会把它留给你来弄清楚这里的模式要求。

但是，数据库仍然没有发出我目前知道的更改事件。

于 2013-11-21T04:59:28.553 回答