用于缓存 JSON 数据的 Polymer 1.0 策略

Question

我正在努力学习 Polymer。我的 objective 是创建一个完全独立的元素（在应用程序内路由，管理应用程序内不同子元素的数据需求）。我的 objective 是创建一个用户可以注入现有网站的元素。例如：

<my-app key="XXXXXXXXXX"></my-app>

'my-app' 被注入现有网站。 key 的值与内部 web-api 调用一起使用，以检索特定于此实现的数据。

'my-app'的内部结构可能是这样的：

<dom-module id="my-app">
     <template>
          <game-list></game-list>
          <game-detail></game-detail>
          <play-game></play-game>
          <leader-board></leader-board>
     </template>
</dom-module>

'game-list' 提供用户可能玩的游戏列表。这里的内容取决于 'key' 属性的值。同样，'game-detail' 将是从 'game-list' 中选择的游戏的详细信息。 'play-game' 是 UI 允许用户玩他们选择的游戏。最后，'leader-board' 显示所有使用此应用程序的玩家的排名。

我需要一些关于管理策略的帮助 json-请为每个子元素提供数据需求。

缓存为 'game-list' 元素检索的游戏列表的最佳做法是什么？如果用户从 'game-list' 导航到 'game-detail' 然后返回到 'game-list'，我不想随后调用 Web 服务来检索游戏列表。
从 'game-list' 导航到 'game-detail' 会将 URL 更新为所选游戏的 'id'（路线：“/game-detail/23”）。我希望能够为 ID 为 23 的调用获取游戏详细信息。因此，如果他们再次返回“/game-detail/23”，则不会调用 WebAPI。但是，如果他们导航到“/game-detail/326”，应用程序会意识到 326 与 23 不同，因此它会重新调用 WebApi。

总结一下，缓存数据有哪些strategies/best-practices？

我做了很多 AngularJS 开发并使用 Angular 的服务（它们是单例）为 UI 缓存数据。有没有办法对 Polymer 元素做类似的事情？有没有办法创建充当数据存储的内部机制？

我想我可以依赖本地存储，但更喜欢某种类型的 'service' 作为一种资源，所有元素都可以利用它来检索它们的数据。 'service' 负责向 WebAPI 发送请求（通过 iron-ajax）并根据需要缓存数据。

感谢您的帮助。

Answer 1

在一个应用程序中，我使用 iron-localstorage 来缓存后端数据。

您可以创建自己的 backend-element 来包装 iron-localstorage 并透明地处理所有元素的缓存。

您还可以查看 iron-meta，它使用单态模式在不同组件之间共享数据。

用于缓存 JSON 数据的 Polymer 1.0 策略

Polymer 1.0 strategies for caching JSON data

polymer

polymer-1.0