Жизненный цикл полимера: почему свойства еще не загружены из атрибутов DOM при обратном вызове "Attached"?

Question

Мне очень трудно понять жизненные циклы полимерных элементов.

Предположим, у меня есть пользовательский элемент с одним свойством 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 не загружается из атрибута DOM fooBar до тех пор, пока ready а также attached называются. Это верно даже тогда, когда я вызываю async изнутри готовых и прикрепленных обратных вызовов.

Кто-нибудь может объяснить (1), где в жизненном цикле свойства элемента импортируются из атрибутов DOM и (2) как программно получить доступ к этим атрибутам, чтобы выполнить некоторую работу по настройке элемента?

Answer 1

Если вы читали о Custom Element Spec, в жизненном цикле элемента есть этот обратный вызов attributeChangedCallback(name, oldVal, newVal) где его удобно переименовать в Polymer как attributeChanged(type, name), Однако это не предпочтительный способ прослушивания атрибутов, вместо этого вы присоединяете наблюдателя к этому свойству, в данном случае на fooBar,

Вот пример jsbin. Ты это видишь fooBarChanged вызывается первым, прежде чем attached а также ready,

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