多级元素之间的消息（Polymer）

Question

在不同级别（DOM）元素之间更改数据的最佳方法是什么？

例如，我想在 index.html (<template is="auto-binding") 上的变量中保存一个 REST 服务基础 URL，这样我就可以从项目中的任何地方访问这个值, 无论层次结构如何。

我猜 <core-storage> 是一个选项，是吗？还有哪些选择？

谢谢

编辑：

刚在这里找到我的答案：

Answer 1

您可以使用自定义事件来提醒多级元素之间的变化，例如

<component-1>
 Polymer({
   ready: function() {
    this.addEventListener("data-change", function(e) {
      this.data = e.detail.data;
    });
   },
</component-1>

<component-deep>
  Polymer({
    dataChanged: function() {
     this.fire("data-change", {data: this.data});
    }
  });
</component-deep>

Answer 2

我会按照 "Supporting global variables" 下的 Polymer 文档中的建议进行操作。 https://www.polymer-project.org/0.5/docs/polymer/polymer.html#global。创建一个使用函数闭包在该元素的所有实例之间共享状态的元素，然后在您需要访问共享数据时随时创建该元素的实例。

直接从文档中复制：

<polymer-element name="app-globals">
  <script>
  (function() {
    // these variables are shared by all instances of app-globals
    var firstName = 'John';
    var lastName = 'Smith';

    Polymer({
      ready: function() {
        // copy global values into instance properties
        this.firstName = firstName;
        this.lastName = lastName;
      }
    });
  })();
  </script>
</polymer-element>

Then use the element as you would any other. You can access its properties using Polymer data binding or plain JavaScript:

<polymer-element name="my-component">
  <template>
    <app-globals id="globals"></app-globals>
    <div id="firstname">{{$.globals.firstName}}</div>
    <div id="lastname">{{$.globals.lastName}}</div>
  </template>
  <script>
    Polymer({
      ready: function() {
        console.log('Last name: ' + this.$.globals.lastName);
      }
    });
  </script>
</polymer-element>

Answer 3

正如 Trevor Dixon explained in an earlier answer you can use globals. Divshot 对他们的许多应用程序所做的那样（甚至在它正式出现在文档中之前），但他们使用自己的自定义元素作为全局变量。

但到目前为止，他们还没有灵丹妙药。到目前为止，我的经验是最佳做法取决于具体情况。以下是我通常想到的一些概括...

全局浏览器存储（<core-storage>、<local-forage>、pouchDB、IndexedDB、cookies 等）
- 用法： 如果您有需要与多个元素共享的数据、管理离线数据以及维护 state/data跨使用传统浏览器页面导航的应用程序
- 注意事项： 客户端可以有限制space（localStorage有5mb base为例），通常是同步的API's（不是全部，虽然像 Mozilla 的 localForage），仅限于单个浏览器，在维护状态时会变得复杂
自定义事件
- 用法： 非常适合在应用程序中共享少量数据和信号。在整个 DOM 中，事件是干净的并冒泡，忽略阴影边界
- 注意事项： 不适合大量数据，不适合虚拟 DOM 方法，可靠且易于使用，限于 window & 文档生命周期（刷新不会保持数据状态）
全局变量
- 用法： 非常适合在 JavaScript 对象[=52= 中跨应用共享少量和大量数据]
- 注意事项： 如果不及早处理，维护和性能可能会出现问题，Polymer 有一个内置的全局机制，因此易于使用，绑定到文档 & window 生命周期

一般来说，不，您将结合使用这些策略与 restful API 数据最终持久化并与之同步。情况并非总是如此，但在客户端的现代 JavaScript 应用程序中很典型。

多级元素之间的消息（Polymer）

Message between multi-level elements (Polymer)

polymer