0
爲什麼connectedCallback()
打破我的Plunk? Comment and uncomment it in this demo to see what I mean.我在做什麼錯?connectedCallback()休息Polymer 2.x Plunk
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.
[Demo](https://plnkr.co/edit/s5MDwtGpIvwgCTCnSN9w?p=preview) – Mowzer