在 Polymer 1.0 中实现全局变量

Question

我正在尝试复制 Polymer 0.5 文档以下部分中的示例，该示例使用 MonoState 模式在 Polymer 中实现全局变量：

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

我正在尝试使用 Polymer 1.0 来完成这项工作，但运气不佳。

这是我的 app-globals 和 my-component 自定义元素的代码。除了 Polymer 1.0 中的语法略有不同外，它与上述链接中的相同。例如使用dom-module 而不是polymer-element。

<dom-module name="app-globals">
    <script>
        (function() {
            // these variables are shared by all instances of app-globals
            var values = {
                firstName: 'John',
                lastName: 'Smith'
            }

            Polymer({
                 is: 'app-globals',
                ready: function() {
                    // make global values available on instance.
                    this.values = values;
                }
            });
        })();
    </script>
</dom-module>

<dom-module name="my-component">
    <template>
        <app-globals id="globals"></app-globals>
        <div id="firstname">{{$.globals.values.firstName}}</div>
        <div id="lastname">{{$.globals.values.lastName}}</div>
    </template>
    <script>
        Polymer({
             is: 'my-component',
              ready: function() {
                console.log('Last name: ' + this.$.globals.values.lastName);
              }
    });
    </script>
</dom-module>

用法很简单：

<my-component></my-component>

最初我遇到错误“无法读取未定义的属性 '$'”。因此，我在 my-component 自定义元素中将 div 内容 $.globals.values.firstName 替换为 this.$.globals.values.firstName（同样适用于 lastName 字段）。

但是 div 不显示名字和姓氏。在渲染 div 时，看起来 this.$.globals.values.firstName 和 this.$.globals.values.lastName 没有设置。

希望能提供一些帮助来解决这个问题。

Answer 1

这是工作示例，Plunk

properties: {
          values: {
            type: Object,
            notify: true
          }
        },

        ready: function() {
          // make global values available on instance.
          this.values = {
            firstName: 'John',
            lastName: 'Smith'
          }
        }