在聚合物2.x中使用铁元元素来管理状态

Question

I am trying to use iron-meta to manage state in a Polymer app. Here is my Plunker demo.

On that same Plunker, I am also using Mixins to manage state. (So we can compare the two systems.)

Desired Behavior

On the demo, at the bottom, I expect the part that follows "Meta says:" to match and track the part that follows "Send notifications option is:" when the options checkbox at the top labeled "Send Notifications" is clicked.

Actual Behavior

But instead of that desired behavior, the actual behavior I get is the "Meta says:" section never populates with any data.

Demo

Plunker Demo

Demo screen recording

my-view2.html

 <link rel="import" href="my-options.html"> <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/"> <link rel="import" href="polymer/polymer-element.html"> <link rel="import" href="iron-meta/iron-meta.html"> <dom-module id="my-view2"> <template> <style> :host { display: block; padding: 10px; } </style> <iron-meta key="meta" value="{{meta}}"></iron-meta> <my-options></my-options> <div class="card"> <div class="circle">2</div> <h1>View Two</h1> <p>Ea duis bonorum nec, falli paulo aliquid ei eum.</p> <p>Id nam odio natum malorum, tibique copiosae expetenda mel ea.Detracto suavitate repudiandae no eum. Id adhuc minim soluta nam.Id nam odio natum malorum, tibique copiosae expetenda mel ea.</p> <p>Send notifications option is: <b>[[ options.subscribe ]]</b></p> <p>Meta says: <b>[[ meta ]]</b></p> </div> </template> <script> class MyView2 extends MyOptionsMixin(Polymer.Element) { static get is() { return 'my-view2'; } } window.customElements.define(MyView2.is, MyView2); </script> </dom-module> 

my-options.html

 <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/"> <link rel="import" href="polymer/polymer-element.html"> <link rel="import" href="paper-checkbox/paper-checkbox.html"> <link rel="import" href="iron-meta/iron-meta.html"> <dom-module id="my-options"> <template> <style> :host { display: block; padding: 16px; } h3, p { margin: 8px 0; } </style> <iron-meta key="meta" value="[[options.subscribe]]"></iron-meta> <h3>Options</h3> <p> <paper-checkbox checked="{{ options.subscribe }}">Send Notifications</paper-checkbox> </p> </template> <script> (function() { let optionsInstance = null; class MyOptions extends Polymer.Element { static get is() { return 'my-options'; } static get properties() { return { options: { type: Object, value: () => ({ subscribe: false }) }, subscribers: { type: Array, value: () => [] } } } static get observers() { return [ 'optionsChanged(options.*)' ] } constructor() { super(); if (!optionsInstance) optionsInstance = this; } register(subscriber) { this.subscribers.push(subscriber); subscriber.options = this.options; subscriber.notifyPath('options'); } unregister(subscriber) { var i = this.subscribers.indexOf(subscriber); if (i > -1) this.subscribers.splice(i, 1) } optionsChanged(change) { for(var i = 0; i < this.subscribers.length; i++) { this.subscribers[i].notifyPath(change.path); } } } window.customElements.define(MyOptions.is, MyOptions); MyOptionsMixin = (superClass) => { return class extends superClass { static get properties() { return { options: { type: Object } } } connectedCallback() { super.connectedCallback(); optionsInstance.register(this); } disconnectedCallback() { super.disconnectedCallback(); optionsInstance.unregister(this); } } } }()); </script> </dom-module> 

Answer 1

The short answer is: <iron-meta> doesn't have notification support. https://github.com/PolymerElements/iron-meta/issues/9

Your example is relying on the fact the two-way bindings work and your meta property gets updated when the observed key changes. This is not the case. Internally, values are simply assigned to a global store, and there is not publish/subscribe mechanism in-place. https://github.com/PolymerElements/iron-meta/blob/master/iron-meta.html#L91

If you're using Polymer 1.x, maybe this element will satisfy your needs: https://www.webcomponents.org/element/trofrigo/global-variable