Уважаемое сообщество Полимеров,
Мне тяжело изучать полимер и следить за документами и учебными пособиями в Интернете.
Я опытный серверный разработчик C ++ и Java. Но мои отношения с front-end и веб-разработкой никогда не были гладкими.
Возможно, это связано с тем, что веб-разработка продолжает меняться очень быстрыми темпами, а документы и учебные пособия предполагают, что пользователь обладает большим опытом работы с предыдущими веб-фреймворками.
Несколько лет назад мне пришлось внедрить веб-интерфейс для встроенного блока, над которым работала моя команда. Я сделал веб-компонент, используя bootstrap и AngularJs. Мне очень понравился этот сторонний проект, и он был свежим воздухом по сравнению с написанием c ++ для встроенной платформы. Мне также очень понравилось, как AngularJs применяли шаблон MVC к веб-странице.
Перенесемся в настоящее, теперь полимерные и веб-компоненты Google - это новые модные тенденции.
Прошел учебник по полимерам и прочитал немного о веб-компонентах. Я думаю, что это хорошая идея повторно использовать веб-компоненты. Просто просмотрите огромную библиотеку существующих веб-компонентов, выберите то, что вы хотите. Звучит неплохо в теории ... за исключением ... новичка, такого как я, не мог целый день правильно использовать один веб-компонент.
Мне не хватает документов, а пример кода неточный. Позвольте мне пройти простой пример. Одним из веб-компонентов, который я хочу использовать, является iron-pages. Потрясающий веб-компонент, и это именно то, что мне нужно!
Я прочитал документы для iron-pages и посмотрел демоверсию на webcomponents.org, и сейчас самое время ее использовать. За исключением того, что я не могу заставить вещь работать.
Вот именно то, что я сделал в командной строке, используя Polymer-Cli
mkdir my-app
cd my-app
polymer init
Я выбрал полимер-2-приложение
Я пробую свое приложение
polymer serve --open
Ура, это показывает Здравствуйте, my-app-app! на веб-странице
Далее я пытаюсь использовать веб-компонент iron-pages. Поэтому мне нужно скачать этот компонент, используя Bower
bower install --save PolymerElements/iron-pages
Демонстрация для iron-pages указана здесь вместе с примером кода. Но пример кода не соответствует тому, что должно отображаться в веб-компоненте ... или, по крайней мере, тому, что я читал в руководствах по использованию веб-компонента.
В этом примере кода нет тега. Есть тег, которого там быть не должно. Я уверен, что опытный веб-разработчик знал бы, как преодолеть разрыв ... но не я.
Я изо всех сил старался адаптировать этот пример кода iron-pages, чтобы он поместился в мой файл src/my-app-app/my-app-app.html
Вот мой код:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<dom-module id="my-app-app">
<template>
<style>
:host {
display: block;
}
iron-pages {
width: 100%;
height: 200px;
font-size: 50px;
color: white;
text-align: center;
}
iron-pages div {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
iron-pages div:nth-child(1) {
background-color: var(--google-blue-500);
}
iron-pages div:nth-child(2) {
background-color: var(--google-red-500);
}
iron-pages div:nth-child(3) {
background-color: var(--google-green-500);
}
</style>
<h2>Hello [[prop1]]!</h2>
<iron-pages selected="0">
<div>One</div>
<div>Two</div>
<div>Three</div>
</iron-pages>
</template>
<script>
/**
* @customElement
* @polymer
*/
class MyAppApp extends Polymer.Element {
static get is() { return 'my-app-app'; }
static get properties() {
return {
prop1: {
type: String,
value: 'my-app-app'
}
};
}
}
window.customElements.define(MyAppApp.is, MyAppApp);
var pages = document.querySelector('iron-pages');
pages.addEventListener('click', function(e) {
pages.selectNext();
});
</script>
</dom-module>
iron-pages не отображается на веб-странице. Консоль разработчика на Chrome показывает ошибку, которую я пытаюсь сделать addEventListener по нулевому указателю. Поэтому я попытался закомментировать часть addEventListener. Я ожидаю увидеть один из iron-pages, даже если я не могу нажать, чтобы вращаться среди страниц. Но железные страницы все еще не появляются вообще.
Буду признателен, если один из вас, опытных веб-разработчиков, сможет меня просветить. У меня есть другие примеры других веб-компонентов, которые я не смог бы использовать идеально, например app-toolbar, я не смог отобразить iron-icon ... даже если я установил iron-icon. В любом случае, я был бы счастлив, если бы мог начать с того, что подключил мой iron-pages.