Polymer Lifecycle：为什么在 'Attached' 回调时尚未从 DOM 属性加载属性？

Question

我真的很难理解polymer element lifecycles。

假设我有一个带有单个 属性 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 加载。这适用 .

任何人都可以解释 (1) 在生命周期中元素属性从 DOM 属性导入的位置以及 (2) 如何以编程方式访问这些属性以对元素进行一些设置工作？

Answer 1

如果您阅读过自定义元素规范，在元素的生命周期中有一个名为 attributeChangedCallback(name, oldVal, newVal) 的回调，它在 Polymer 中方便地重命名为 attributeChanged(type, name)。然而，这不是监听属性的首选方式，而是将观察者附加到 属性，在本例中是 fooBar.

这是一个 jsbin 示例。您可以看到 fooBarChanged 在 attached 和 ready 之前被调用。

http://jsbin.com/gibopu/edit?html,console,output