gpt4 book ai didi

polymer - 在 Polymer 2 中只触发就绪生命周期回调

转载 作者:行者123 更新时间:2023-12-04 13:06:50 26 4
gpt4 key购买 nike

当我创建 Polymer 2.0 元素时,只有 ready生命周期回调似乎触发了,我不知道为什么。例如,我有这个 Polymer 元素:

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

<dom-module id="flip-four-board">
<script>
class FlipFourBoard extends Polymer.Element {

static get is() { return "flip-four-board"; }

created() {
super.created();
console.log("created");
}

ready() {
super.ready();
console.log("ready");
}

attached() {
super.attached();
console.log("attached");
}

detached() {
super.detached();
console.log("detached");
}

}

customElements.define(FlipFourBoard.is, FlipFourBoard);
</script>

</dom-module>

但是当我将它插入这样的页面时:
<!DOCTYPE html>
<html>
<head>
<title>Flip Four Board Tests</title>
<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../flip-four-board.html">
<style type="text/css">
html, body {
width: 95%;
height: 95%;
}
</style>
</head>
<body>
<flip-four-board></flip-four-board>
</body>
</html>

控制台只显示:

console log

为什么只有 ready回调触发?

最佳答案

Polymer 2.0 引入了几个 lifecycle callback changes ,包括替换基于类的元素定义中除一个原始回调之外的所有回调(即 ready )。使用 Polymer 时,遗留回调仍然可用2.0 中的工厂方法

      1.x (legacy)    |      2.x
----------------------|-----------------------------
created | constructor
attached | connectedCallback
detached | disconnectedCallback
attributeChanged | attributeChangedCallback
ready | ready

所以,你的类应该类似于:
class FlipFourBoard extends Polymer.Element {

static get is() { return "flip-four-board"; }

constructor() {
super();
console.log("created");
}

ready() {
super.ready();
console.log("ready");
}

connectedCallback() {
super.connectedCallback();
console.log("attached");
}

disconnectedCallback() {
super.disconnectedCallback();
console.log("detached");
}

}

demo

关于polymer - 在 Polymer 2 中只触发就绪生命周期回调,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43924976/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com