Question

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

例如，我想在index.html（<template is="auto-binding"）的变量中保存REST服务基础URL，因此无论层次结构如何，我都可以从项目的任何位置访问此值。

我猜<core-storage>会是一种选择，是吗？还有什么其他选择？

由于

修改

刚刚在这里找到了答案：https://stackoverflow.com/a/24876397/2750721

Answer 1

我做的事情就像在＃34;支持全局变量＆＃34;下的Polymer docs中所建议的那样。 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>

然后像使用其他任何元素一样使用元素。您可以使用Polymer数据绑定或纯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 2

在前面的答案中解释为Trevor Dixon，您可以使用全局变量。 Divshot为他们的许多应用程序（甚至在它正式出现在文档之前）执行此操作，但他们使用自己的自定义元素进行全局变换。

到目前为止，他们的答案并非万无一失。到目前为止，我的经验取决于最佳做法的情况。以下是我通常会想到的一些概括......

全局浏览器存储（<core-storage>，<local-forage>，pouchDB，IndexedDB，Cookie等）
- 用法： 如果您需要与多个元素共享数据，管理离线数据以及维护使用传统浏览器页面导航的应用程序的状态/数据，那么这非常有用/ em>的

自定义活动

用法： 非常适合在整个应用程序中共享少量数据和信号。活动很干净＆amp;在整个DOM中冒泡，忽略阴影边界

注意事项： 不适合大量数据，不适用于虚拟DOM方法，可靠且可靠。易于使用，仅限于窗户和文档生命周期（刷新不会维护数据状态）

的全局

用法： 非常适合分享小型和小型JavaScript对象中应用程序中的大量数据

注意事项： 维护＆amp;性能可能会出现问题，如果不提前，Polymer有一个内置的全局机制，所以它易于使用，绑定到文档＆amp;窗口生命周期

通常情况下，您不会将这些策略的组合与数据最终持久化并与之同步的RESTful API结合使用。情况并非总是如此，但它在客户端的现代JavaScript应用程序中很常见。

Answer 3

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

<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>

多级元素之间的消息（聚合物）

3 个答案: