使用Mixins在Polymer 2.x中进行状态管理的工作演示

在Polymer 2.0中实现由@CaptainCodeman编写的管理状态中包含的代码-超越父/子绑定 在分离的DOM元素之间共享状态，无需重复

我得到以下错误

run.plnkr.co/：5 GET

run.plnkr.co/：1获取500（）

run.plnkr.co/：1获取500（）

my-view2.html:26

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<link rel="import" href="my-options.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-view2">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10px;
      }
    </style>

    <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>
    </div>
  </template>

  <script>
    class MyView2 extends MyOptionsMixin(Polymer.Element) {
      static get is() { return 'my-view2'; }
    }

    window.customElements.define(MyView2.is, MyView2);
  </script>
</dom-module>

未捕获引用错误：
MyOptionMixin未在my-view2中定义。html:26

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<link rel="import" href="my-options.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-view2">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10px;
      }
    </style>

    <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>
    </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

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">

<dom-module id="my-options">
  <template>
    <style>
      :host {
        display: block;
        padding: 16px;
      }
      h3, p {
        margin: 8px 0;
      }
    </style>
    <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>

：主持人{
显示：块；
填充：16px；
}
h3，p{
利润率：8px0；
}
选择权

发送通知

（功能（）{
让optionInstance=null；
类MyOptions扩展了Polymer.Element{
静态get是（）{return'my options'；}
静态获取属性（）{
返回{
选项：{
类型：对象，
值：（）=>({
订阅：false
})
},
订户：{
类型：数组，
值：（）=>[]
}
}
}
静态获取观察器（）{
返回[
'选项已更改（选项。*）'
]
}
构造函数（）{
超级（）；
如果（！optionInstance）optionInstance=this；
}
登记册（订户）{
this.subscribers.push（subscriber）；
subscriber.options=this.options；
subscriber.notifyPath（'options'）；
}
注销（订户）{
var i=this.subscribers.indexOf（订户）；
如果（i>-1）此.subscribers.splice（i，1）
}
选项已更改（更改）{
对于（var i=0；i{
返回类扩展了超类{
静态获取属性（）{
返回{
选项：{
类型：对象
}
}
}
connectedCallback（）{
super.connectedCallback（）；
optionInstance.register（此选项）；
}
disconnectedCallback（）{
super.disconnectedCallback（）；
选项实例。取消注册（此选项）；
}
}
}
}());

my-view2.html

<link rel="import" href="../bower_components/polymer/polymer-element.html">

<link rel="import" href="my-options.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-view2">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10px;
      }
    </style>

    <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>
    </div>
  </template>

  <script>
    class MyView2 extends MyOptionsMixin(Polymer.Element) {
      static get is() { return 'my-view2'; }
    }

    window.customElements.define(MyView2.is, MyView2);
  </script>
</dom-module>

：主持人{
显示：块；
填充：10px；
}
2.
视图二
这是一个很好的例子，保罗的流动性很好

我不知道该怎么办，因为我国的泰比克人的经验是有限的。这是一个非常小的解决方案，它是一个非常小的解决方案

发送通知选项为：[[options.subscribe]]

类MyView2扩展了MyOptionMixin（Polymer.Element）{
静态get是（）{return'my-view2'；}
}
window.customElements.define（MyView2.is，MyView2）；

编辑：（已接受的答案分叉并编辑）

---

run.plnkr.co/：5 GET

您的

标记导入一个不存在的文件：

https://cdn.rawgit.com/download/polymer-cdn/2.0.0/lib/webcomponentsjs/webcomponents-lite.min.js

我会使用与Plunker其余部分相同的

polygit.org

URL：

https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/

此外，脚本名称不再包括

min

。实际文件名是

webcomponents lite.js

。

标记应如下所示：

<script src="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/webcomponentsjs/webcomponents-lite.js"></script>

此处导入的唯一需要来自

polygit.org

的文件是

polymer element.html

，因此您可以删除

标记并将URL前缀移动到该导入：

<link rel="import" href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/polymer/polymer-element.html">

目前，AFAIK是聚合物状态管理的最佳实践。它似乎比以前更受欢迎。有人能证实或否认这一点吗？