Question

为什么connectedCallback()打破了我的Plunk？ Comment and uncomment it in this demo to see what I mean.我做错了什么？

https://plnkr.co/edit/f4X7aZYj1MHSIjPttygH?p=preview

我-demo.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-toggle-button/paper-toggle-button.html">


<dom-module id="my-demo">
  <template>
    <style>
      :host > * {
        margin-top: 40px;
        font-size: 18px;
      }

      button.save {
        background-color: blue;
        color: white;
        margin-left: 12px;
      }
    </style>

    <paper-toggle-button checked="{{item.alice}}">Alice</paper-toggle-button>
    <paper-toggle-button checked="{{item.bob}}">Bob</paper-toggle-button>
    <paper-toggle-button checked="{{item.charlie}}">Charlie</paper-toggle-button>
    <paper-toggle-button checked="{{item.dave}}">Dave</paper-toggle-button>

    <button on-tap="_reset">Reset</button>
    <button class="save">Save</button>

  </template>

  <script>
    class MyDemo extends Polymer.Element {
      static get is() {
        return 'my-demo';
      }
      static get properties() {
        return {
          item: {
            type: Object,
            notify: true,
            value: () => {
              return {
                alice: false,
                bob: true,
                charlie: false,
                dave: true,
              };
            },
          },
          oldItem: {
            type: Object,
            notify: true,
          },
        };
      }

      constructor() {
        super();
      }

      ready() {
        super.ready();
        this.set('active', false);
        this.set('oldItem', this.item);
        //console.log('oldItem', this.oldItem);
      }

      // Uncomment the connectedCallback()
      // to see all the buttons go away
      // connectedCallback() {}

      static get observers() {
        return [
          '_itemChanged(item.*)',
        ];
      }

      _saveItem(o) {
        //console.log("new-item", o);
      }

      _itemChanged(newItem) {
        //console.log('newItem', newItem);
        //console.log('oldItem', this.oldItem);
        this.set('active', true);
        //console.log('active', this.active);
      }
    }

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

修改：Here is a demo of the accepted answer.

Answer 1

您需要拨打super.connectedCallback();内的connectedCallback() { ... }，否则永远不会调用原始函数。

connectedCallback（）打破Polymer 2.x Plunk

1 个答案: