Статьи

Как получить доступ к функциям-членам в полимерных элементах

Ноябрь 12, 2018

Эта статья является частью серии технологий веб-разработки от Microsoft. Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.

изображение 1- полимер

Сейчас я работаю над глупым проектом Polymer , который анализирует базу данных покемонов и возвращает изображение покемона, а затем произносит имя существа на ваших спикерах. Вот исходный код моего проекта.

Это мой первый раз, когда я использую Polymer, и я определенно зацепился за несколько мест. Совсем недавно он пытался вернуть функции-члены созданного мной объекта Polymer. У меня ушло навсегда, чтобы понять это, поэтому я хотел поделиться этим с вами в этом уроке.

Sidenote: вы также можете найти мой более подробный обзор веб-компонентов здесь .

Неправильный путь

У меня есть веб-компонент, который выглядит так: 

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

Если я попытаюсь получить доступ к нему по его идентификатору … 

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

Я не могу получить доступ ни к одной из функций внутри него. Они возвращают undefined Так что, если я попробовал это: 

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

Почему это происходит?

Это связано с инкапсуляцией Shadow DOM. Это и подарок, и проклятие. В этом случае я обращаюсь к элементу, а не к shadowRoot

На следующем шаге вы увидите, как я могу получить доступ к функциям-членам в моем пользовательском элементе, а также как я могу вернуть узлы, которые лежат еще глубже в моем веб-компоненте.

Роб Добсон из команды Google Polymer хорошо объясняет это в этом посте. Эрик Бидлман более подробно рассказывает в своей продвинутой статье о Shadow DOM. Я настоятельно рекомендую уделить время их чтению, чтобы лучше понять, как работает эта версия DOM.

Один из способов сделать это 

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

Обратите внимание, что я не использую хеш-символ (#) для доступа к элементу, как если бы это был идентификатор. Вместо этого вам нужно просто обратиться к названию самого полимерного элемента: 

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

так что теперь я могу написать: 

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

Теперь я могу получить доступ ко всем участникам, как это: 

 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>

Поэтому я советую вообще не присваивать идентификатор вашему polymer-element Как пояснил Роб в комментариях ниже, вы можете запросить произвольный элемент по своему усмотрению (с помощью IDclassattr Вот его пример: http://jsbin.com/qikaya/2/edit

Еще один способ сделать это …

Вы также можете получить идентификатор полимерного элемента и получить доступ к функциям-членам.

Это делается с помощью события « готов к полимеру» . Как документы описывают это:

Polymer анализирует определения элементов и обрабатывает их обновление асинхронно . Если вы преждевременно получите элемент из DOM до того, как у него появится возможность обновить его, вы будете работать с простым HTML-элементом вместо своего пользовательского элемента.

И это именно та проблема, с которой я столкнулся ранее. Я пытался захватить функции внутри моего polymer-elementобновить его. Вот пример: 

 <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>

В заключение, пока вы упаковываете функции, которые вы пытаетесь вызвать в событии, готовом к полимеру , вы должны хорошо идти и можете вызывать функции из вашего полимерного элемента.

Как я это использую 

 (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>

Больше обучения JavaScript

Это может вас немного удивить, но у Microsoft есть много бесплатных обучающих программ по многим темам JavaScript с открытым исходным кодом, и мы нацелены на создание гораздо большего с приходом Microsoft Edge .

Вот более широкая серия обучения нашей команды по HTML, CSS и JS:

Эта статья является частью серии технологий веб-разработки от Microsoft. Мы рады поделиться с вами Microsoft Edge и новым механизмом рендеринга EdgeHTML . Получите бесплатные виртуальные машины или проведите удаленное тестирование на устройстве Mac, iOS, Android или Windows по адресу http://dev.modern.ie/

34
Share: