我很难理解聚合物元素的生命周期。
假设我有一个具有单个属性fooBar
的自定义元素。假设我像这样设置fooBar
作为属性上的属性
<custom-element foo-bar="text"></custom-element>
现在假设我想在元素生命周期创建期间以编程方式使用fooBar
作为属性。所以有点像。
Polymer({
is: "custom-element",
properties: {
fooBar: {type: String}
},
ready: function(){
console.log(this.fooBar)
},
attached: function(){
console.log(this.fooBar)
}
})
据我所知,元素属性fooBar直到调用了ready
和attached
之后才从DOM属性fooBar加载。即使我从准备好的和附加的回调内部调用async,这也是正确的。
有人能解释一下(1)元素属性在生命周期中从DOM属性导入的位置吗?(2)如何以编程方式访问这些属性来对元素进行一些设置工作?
如果您已经阅读过自定义元素规范,那么在元素的生命周期中有一个名为attributeChangedCallback(name, oldVal, newVal)
的回调,它在Polymer中方便地重命名为attributeChanged(type, name)
。但是,这不是侦听属性的首选方式,而是将一个观察者附加到该属性,在本例中是在fooBar
上。
这是一个jsbin示例。您可以看到fooBarChanged
在attached
和ready
之前被首先调用。
http://jsbin.com/gibopu/edit?html,控制台,输出