聚合物全局变量

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脚本(复制到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解决方案.