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实例。但是这些实例中的每一个都可以共享许多属性（想想＆＃34;静态＆＃34; vars in Java或＆＃34; class＆＃34; vars in ObjC / Swift）。

app-globals元素中的脚本（或实际上任何Polymer元素）只运行一次 - 在加载组件定义时将其视为运行。但该脚本中的Polymer函数声明了一个配置对象，其中包含属性和生命周期事件处理程序，这些对象将为每个实例单独创建。您引用的文档中的app-globals脚本（复制到UPDATE下面：此版本将在后面描述中修改）使用匿名闭包（一个立即运行的函数），包含共享变量和声明配置对象的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所述，如果更改数据值，则新值不可用于所有其他实例 - 因为实例变量只是引用字符串的副本。通过使用具有数据属性的对象（如上面编辑的版本），并且只读取和分配该对象的数据属性而不是覆盖对象本身，更改的值可在实例之间共享。

Answer 2

@Zreptil已经要求上面的一个例子，因为我不得不尝试这个，我根据Tim Stewart的答案和Polymer文档构建了一个。

完整示例：http://jsbin.com/figizaxihe/1/edit?html,output

我在id（id="global-variable"）中遇到了破折号，所以我也添加了一个例子。

元素定义

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

    Polymer({
       ready: function() {
         this.data = data;
       }
    });
  })();

</script>
</polymer-element>

在聚合物元素中使用

<polymer-element name="output-element" noscript>
<template>
    <app-globals id="globalvars"></app-globals>
    <h4>Output-Element</h4>
    <div>First Name: {{$.globalvars.data.firstName}}</div>
</template>
</polymer-element>

在聚合物元素外使用

<template is="auto-binding">
    <app-globals id="topglobals"></app-globals>
    <h3>First Name in Title: {{$.topglobals.data.firstName}}</h3>
</template>

请注意破折号/连字符

  <h3>and since that took me a while to realize - dashes are not directly supported...</h3>
<template is="auto-binding">
    <!-- can use different id's -->
    <app-globals id="global-variables"></app-globals>
    <div>This does not work: {{$.global-variables.data.firstName}}</div>
    <div>Correct syntax: {{$['global-variables'].data.firstName}}</div>

</template>

聚合物1.0

如果感兴趣，请参阅Polymer 1.0 Global Variables了解聚合物1.0解决方案。

聚合物全局变量

2 个答案: