我正在开发一个Polymer应用程序,它从RESTful API中提取数据并使用它来构建接口.我在概念上被困在一个特定的区域是在
http://www.polymer-project.org/docs/polymer/polymer.html#global描述的Monostate模式的实现.有效的是,我可以将声明属性添加到新的组件app-globals中,然后直接访问它.
这是一个关键问题：如果我通过core-ajax将API(数据)重新提交给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数据版本.我错过了什么吗？还有另一种方法来确保应用程序不断只有一个版本的真相？
解决方法
每次在自定义组件中引用app-globals,都会创建一个新的app-globals实例.但是,这些实例中的每一个都可以共享一些属性(在Java中考虑“static”vars或ObjC / Swift中的“class”vars).
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所述,如果更改数据值,则新值不适用于所有其他实例 – 因为实例变量只是引用字符串的副本.通过使用具有数据属性的对象,如上面编辑的版本,只有从该对象的数据属性读取和分配,而不是覆盖对象本身,更改的值可在实例之间共享.
