使用 iron-meta 管理 Polymer 中的状态 2.x

Question

我正在尝试使用 iron-meta 来管理 Polymer 应用程序中的状态。 Here is my Plunker demo.

在同一个 Plunker 上，我还使用 Mixins 来管理状态。（所以我们可以比较这两个系统。）

期望的行为

在演示中，在底部，当顶部的选项复选框标记为 "Send Notifications" 时，我希望 "Meta says:" 之后的部分匹配并跟踪 "Send notifications option is:" 之后的部分被点击。

实际行为

但我得到的实际行为不是预期的行为，而是 "Meta says:" 部分从未填充任何数据。

演示

Plunker Demo

演示屏幕录制

我的-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>

我的-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

简短的回答是：<iron-meta> 不支持通知。 https://github.com/PolymerElements/iron-meta/issues/9

您的示例依赖于双向绑定有效并且您的 meta 属性在观察到的键更改时得到更新的事实。不是这种情况。在内部，值被简单地分配给全局存储，并且没有 publish/subscribe 机制就地。 https://github.com/PolymerElements/iron-meta/blob/master/iron-meta.html#L91

如果您使用的是 Polymer 1.x，也许这个元素可以满足您的需求： https://www.webcomponents.org/element/trofrigo/global-variable

使用 iron-meta 管理 Polymer 中的状态 2.x

Using iron-meta to manage state in Polymer 2.x

state

polymer

iron-elements

polymer-2.x

期望的行为

实际行为

演示