logo

Jak získat přístup k členským funkcím v polymerových prvcích

Tento článek je součástí série webových vývojářů od společnosti Microsoft. Děkujeme, že podporujete partnery, kteří umožňují existenci SitePoint.

Právě teď pracuji na hloupém projektu Polymer, který analyzuje databázi Pokémonů a vrátí obrázek Pokémona a poté vysloví do reproduktorů jméno stvoření. Zde je zdrojový kód mého projektu.

Je to poprvé, co používám Polymer, a určitě jsem na několika místech zachycen. V poslední době se to pokoušelo vrátit členské funkce objektu Polymer, který jsem vytvořil. Trvalo mi věčnost, než jsem na to přišel, a tak jsem se o to s vámi chtěl podělit v tomto tutoriálu.

Vedlejší poznámka:zde také můžete vyhledat můj podrobnější popis webových komponent.

Špatný způsob

Mám webovou komponentu, která vypadá takto:

<x -radial-buttons id="radial-button-template"></x>

Pokud se k němu pokusím získat přístup pomocí jeho ID…

var  temp = document.querySelector("#radial-button-template");
// returns <x -radial-buttons id="radial-button-template"></x>

Nemohu přistupovat k žádné z funkcí uvnitř. Vrací undefined . Takže pokud jsem zkusil toto:

var  temp = document.querySelector("#radial-button-template");
temp.getFirstElement  // returns undefined

Proč se to děje?

To je způsobeno zapouzdřením Shadow DOM. Je to dar i prokletí. V tomto případě přistupuji k prvku a ne k shadowRoot , který odhalí veřejné metody připojené k objektu Shadow DOM.

V dalším kroku uvidíte, jak mohu získat přístup k členským funkcím v mém vlastním prvku, a také jak mohu vrátit uzly, které leží ještě hlouběji v mé webové komponentě.

Rob Dobson z týmu Polymer společnosti Google to dobře vysvětluje v tomto příspěvku na blogu. Eric Bidleman jde ve svém pokročilém článku Shadow DOM ještě podrobněji. Důrazně doporučuji věnovat čas jejich přečtení, abyste lépe porozuměli tomu, jak tato verze DOM funguje.

Jeden způsob, jak to udělat

var btn = document.querySelector("x-radial-buttons");

Všimněte si, že pro přístup k prvku nepoužívám symbol hash (#), jako by to bylo ID. Místo toho se musíte jednoduše odkázat na název samotného polymerního prvku:

document.querySelector("x-radial-buttons");

takže teď můžu napsat:

var temp = document.querySelector("x-radial-buttons");
// ALSO returns <x-radial-buttons id="radial-button-template"></x-radial-buttons>

Nyní mám přístup ke všem členům takto:

var temp = document.querySelector("x-radial-buttons");
temp.getFirstElement
// returns <paper-radio-button label="English-US" id="paper_radio_btn_en-US" on-click="{{ changeAccentUS }}" role="radio" tabindex="0" aria-checked="false" aria-label="English-US"></paper-radio-button>

Proto doporučuji nepřiřazovat ID vašemu polymer-element vůbec. Jak Rob jasně uvedl v komentářích níže, můžete se dotazovat na vlastní prvek, jak chcete (prostřednictvím ID , class , attr , nebo název prvku) a získejte totéž. Zde je jeho příklad: http://jsbin.com/qikaya/2/edit

Další způsob, jak to udělat…

Můžete také získat ID polymerního prvku a získat přístup k funkcím členů.

To se provádí pomocí události „polymer-ready“. Jak to popisují dokumenty:

Polymer analyzuje definice prvků a zpracovává jejich upgrade asynchronně . Pokud předčasně načtete prvek z DOM, než bude mít možnost upgradovat, budete místo vlastního prvku pracovat s obyčejným prvkem HTML.

A to je přesně ten problém, na který jsem narážel dříve. Snažil jsem se zachytit funkce v rámci mého polymer-element než měl Polymer možnost upgradovat to. Zde je příklad:

<head>
  <link rel="import" href="path/to/x-foo.html">
</head>
<body>
  <x-foo></x-foo>
  <script>
    window.addEventListener('polymer-ready', function(e) {
      var xFoo = document.querySelector('x-foo');
      xFoo.barProperty = 'baz';
    });
  </script>
</body>

Na závěr, pokud zabalíte funkce, které se pokoušíte volat, do polymer-ready Měli byste být připraveni a můžete volat funkce z vašeho polymerního prvku.

Jak to používám

(function (PokémonApp) {

// Grab inputs and button for speech-to-text
var form                 = document.querySelector('#player-form'),
    input                = document.querySelector('#player-input'),
    playerElement        = document.querySelector('#player-element'),
    xPokémon             = document.querySelector('#x-Pokémon'),
    btnChangeAccent      = document.querySelector('#btn-change-accent'),
    radialButtonTemplate = document.querySelector("#radial-button-template"),
  	playerAccent     = playerElement.getAttribute("accent");

// Take text from input & set it as the text that the speaker will say.
// Set the name of the Pokémon, which angular will then grab from the Pokémon DB 
input.addEventListener('input', function (e) {
	playerElement.setAttribute('text', input.value);
	xPokémon.name = input.value;
});


// Say the text when button is pressed
form.addEventListener('submit', function (e) {
	e.preventDefault();
	playerElement.speak();
	var btn = document.querySelector("x-radial-buttons");
	btn.getFirstElement();
});
<header>
<h1>article header h1</h1>
<p>This web app takes advantage of Web Components and Polymer to enable new HTML features in the browser.</p>
<p>
	In this particular case, we are using <a href="https://github.com/passy/x-Pokémon">
	the x-Pokémon web component </a> to pull the images from a database, as well as the 
	<a href="http://zenorocha.github.io/voice-elements/">voice-elements web component</a> to speak the name of the Pokémon we entered.							
</p>
<h2>Change the accent</h2>
<x-radial-buttons id="radial-button-template"></x-radial-buttons>
</header>

Další informace o JavaScriptu

Možná vás to trochu překvapí, ale Microsoft má spoustu bezplatného učení o mnoha tématech open source JavaScriptu a my jsme na misi vytvořit mnohem více s příchodem Microsoft Edge.

Zde je širší výuková série našeho týmu o HTML, CSS a JS:

  • Praktické tipy pro výkon, jak zrychlit HTML/JavaScript (sedmidílná série od responzivního designu přes neformální hry až po optimalizaci výkonu)
  • Moderní webová platforma JumpStart (základy HTML, CSS a JS)
  • Vývoj univerzální aplikace pro Windows pomocí HTML a JavaScript JumpStart (k vytvoření aplikace použijte JS, který jste již vytvořili)
  • A některé bezplatné nástroje:Visual Studio Community, Azure Trial a nástroje pro testování napříč prohlížeči pro Mac, Linux nebo Windows.

Tento článek je součástí série webových vývojářů od společnosti Microsoft. Jsme rádi, že s vámi můžeme sdílet Microsoft Edge a nový vykreslovací modul EdgeHTML. Získejte zdarma virtuální stroje nebo otestujte vzdáleně na svém zařízení Mac, iOS, Android nebo Windows na http://dev.modern.ie/