javascript - polymer 全局变量

Question

我正在开发一个 Polymer 应用程序，它从 RESTful API 中提取数据并使用它来构建界面。我在概念上坚持的一个特定领域是在 http://www.polymer-project.org/docs/polymer/polymer.html#global 中描述的 Monostate 模式的实现。 .实际上，我可以将声明性属性添加到新组件 app-globals 中，然后相当直接地访问它。

这里是关键问题:如果我通过 core-ajax 将数据来回拉取(并可能重新提交)到 app-globals 组件中的 API，我如何确保 app-globals 的所有消费者组件有相同的数据？如果我使用建议的模式，我似乎失去了我的一元论:

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

因为每个使用 app-globals 的组件都将拉取它们自己版本的 API 数据。我错过了什么吗？有没有另一种方法可以确保应用始终只有一个版本的事实？

Answer 1

每次您在自定义组件中引用 app-globals 时，都会创建一个新的 app-globals 实例。但是这些实例中的每一个都可以共享许多属性(想想 Java 中的“静态”变量或 ObjC/Swift 中的“类”变量)。

app-globals 元素(或实际上任何 Polymer 元素)中的脚本只运行一次 - 将其视为在加载组件定义时运行。但是该脚本中的 Polymer 函数声明了一个配置对象，该对象具有属性和生命周期事件处理程序，将为每个实例单独创建。您引用的文档中的 app-globals 脚本(复制在更新下方:此版本已按稍后描述进行了修改)使用匿名闭包(一个立即运行的函数)，其中包含共享变量和声明配置对象的 Polymer 函数依次引用共享变量。因此，该配置对象的每个实例 - 以及 app-globals 的每个实例 - 将引用同一组共享变量。

 <polymer-element name="app-globals">
  <script>
  (function() {
    var data = {
      firstName: 'John',
      lastName: 'Smith'
    }

    Polymer('app-globals', {
       ready: function() {
         this.data = data;
       }
    });
  })();
  </script>
</polymer-element>

如果一个自定义组件实例更改了其 app-globals 实例上的值(或者它们在内部更改，在您的情况下是 AJAX 调用的结果)所有其他组件实例引用app-globals 将看到更改后的值。

更新:原件，复制自:

http://www.polymer-project.org/docs/polymer/polymer.html#global

有一个缺陷，如@zreptil 所述，如果您更改数据值，则新值不适用于所有其他实例 - 因为实例变量只是引用字符串的副本。通过使用具有数据属性的对象，如上面的编辑版本，并且只读取和分配该对象的数据属性而不是覆盖对象本身，更改的值可以在实例之间共享。