[英]Implement global variables in Polymer 1.0
我正在尝试在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
。
希望能有帮助解决此问题。
这是工作示例, Plunk
properties: {
values: {
type: Object,
notify: true
}
},
ready: function() {
// make global values available on instance.
this.values = {
firstName: 'John',
lastName: 'Smith'
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.