AngularJS

Każdy komponent stworzony przy użyciu Polymera jest zadeklarowany przy użyciu taga <dom-module></dom-module>, posiada on co najmniej atrybut id zawierający jego nazwę (nazewnictwo obowiązują te same restrykcje co przy tworzeniu zwykłego komponentu).

Dodatkowo musimy zarejestrować stworzony element. Możemy to zrobić przy pomocy prostego <script>Polymer({is: 'our-id'})</script>.

Tak wygląda prosty, przykładowy webcomponent stworzony przy pomocy Polymera:

Jeżeli chcielibyśmy użyć go w kodzie, wystarczy zrobić to tak samo, jak przy zwykłym Web Componencie:

W efekcie otrzymamy dokument wyświetlający: Hello Web Components !

Aby wykorzystać treść HTML podaną przy użyciu Web Componentu używamy elementu <content></content> (wewnątrz template’a).

Polymer dostarcza nam kilka rzeczy:

1. Zapewnia polyfill Shadow DOM w przeglądarkach, które go nie wspierają
2. Dodaje sugar syntax, ułatwia pisanie komponentów
3. Rozszerza możliwości które mamy w webcomponentach, np:

Dynamiczne renderowanie szablonów (np. atrybut repeat bądź if)

Zwróć uwagę na zagnieżdżone użycie elementu template z atrybutem is="dom-repeat".

Event mapping + Value Watching

Wewnątrz opcji prototypu możemy zadeklarować eventy, zwróć uwagę jak przekazywany jest trigger funkcji clear. Aby zaktualizować wartości naszych properties w rezultacie jakiejś akcji używamy zapisu _value::input. Ten konkretny mówi, że do zmiennej _value zostanie przypisana nowa wartość w reakcji na event input.

Kiedy chcemy używać i obserwować prywatne property, jak w tym przypadku, dobrą praktyką jest poprzedanie ich nazw znakiem podkreślenia (_value).

Więcej lifecycle methods

Polymer dodaje 2 dodatkowe metody do lifecycle methods, oraz używa własnych nazw na poznane wcześniej metody webcomponentowe:

• created - aktywowany przy stworzeniy instancji (natywnie: createdCallback)
• ready - aktywowany gdy element jest w pełni przygotowany, tzn posiada Shadow DOM, podpięte eventListenery itp.
• attached - aktywowany gdy dodamy instację do dokumentu (natywnie: attachedCallback)
• detached - aktywowany gdy usuniemy element z dokumentu (natywnie: detachedCallback)
• attributeChanged - atrybut elementu zmienił się, w polymerze mamy dostęp do Changed watchers (przykład użycia możesz znaleźć nieco wyżej, podczas Event mappingu - funkcja onValueChanged) i jest to zalecana, jeśli możliwa do użycia droga. (natywnie: attributeChangedCallback)

Wygodny node finding

Do wszystkich elementów HTML zawartych wewnątrz szablonu możemy odwołać się przy pomocy this.$, gdzie po kropce możemy podać id elementu który chcemy znaleźć. Możemy również sprawdzać wartości elementu.

Dostęp przy pomocy this.$ otrzymamy tylko do elementów które istnieją podczas inicjalizacji komponentu.

Są to przykładowe własności, które otrzymujemy wraz z Polymerem, kompletną dokumentację API można znaleźć pod tym linkiem.

Zadanie dla Ciebie

• Zaimplementuj komponent play-button za pomocą dom-module
• Pytania?