Полимерный жизненный цикл: Почему свойства еще не загружены из атрибутов 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 не загружается из DOM не приписывать FOOBAR до после того, как ready и attached называется. Это справедливо even when I call async from inside the ready and attached callbacks.

Может ли кто-нибудь объяснить (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