Как использовать веб-компонент

Уважаемое сообщество Полимеров,

Мне сложно изучать полимер и читать документы и руководства в Интернете.

Я опытный разработчик серверных C++ и Java. Но мои отношения с интерфейсом и веб-разработкой никогда не были гладкими.

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

Несколько лет назад мне пришлось реализовать веб-интерфейс для встроенного блока, над которым работала моя команда. Я сделал веб-компонент, используя 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

Ура, на странице отображается Привет, мое приложение!

Затем я пытаюсь использовать веб-компонент 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-pages.

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

Niklas 31.08.2018 16:26

Привет, обратные кавычки вокруг irgon-страниц на самом деле не в моем коде. Я сделал ошибку, когда форматировал свой пост для stackoverflow. Я поправил свой пост.

RichardT 31.08.2018 21:00
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
2
200
2

Ответы 2

Удалите кавычки и используйте как: bower install --save PolymerElements/iron-pages

вместо: bower install --save PolymerElements/'iron-pages'

А также все одинарные кавычки в вашем коде 'iron-pages' просто используйте iron-pages

ДЕМО

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

<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();
});

Привет, обратные кавычки вокруг irgon-страниц на самом деле не в моем коде. Я сделал ошибку, когда форматировал свой пост для stackoverflow. Я поправил свой пост. Спасибо что подметил это. Но мой образец все еще не работает.

RichardT 31.08.2018 21:00

Вот пример с железной страничкой: codepen.io/cappittall/pen/gdgyeQ

HakanC 31.08.2018 22:37

Спасибо @HakanC. После сравнения вашего образца с моим кодом, опубликованным в моем исходном посте, я обнаружил, что для того, чтобы заставить железные страницы работать, мне также нужно импортировать «бумажные вкладки». Это смешно, я думал, что веб-компонент автоматически импортирует все свои зависимости. Консоль отладки разработчика Chrome также не показывала никаких ошибок. Единственный способ заставить его работать - это сравнить с вашим рабочим образцом.

RichardT 04.09.2018 21:49

@RichardT paper-tabs не является зависимостью от iron-pages, и ваш исходный пример не включает paper-tabs. Причина, по которой это не работает, связана с тем, что вы используете document.querySelector.

tony19 04.09.2018 22:56

@RichardT Я страдал от того же в прошлом, но то, что я могу рассказать вам о своем опыте, - это что-то простое. В Polymer есть компоненты, которые вы можете видеть, и те, которыми вы можете управлять, даже если они ничего не показывают на экране. Итак, один из них - железные страницы, компонент, который позволяет вам обмениваться представлениями между вызовами событий.

Karla Danitza Duran Memijes 02.01.2019 20:14

Вы получаете нулевой указатель, потому что устанавливаете событие вне вашего класса. Никакого кода не должно быть, кроме регистрации класса (customElements.define ...)

Обычно в Polymer вы должны устанавливать слушателей в готовом обратном вызове.

Custom element lifecycle here: https://www.polymer-project.org/2.0/docs/devguide/custom-elements

В твоем случае:

 ready() {
    super.ready();
    var pages = document.querySelector('iron-pages');
    pages.addEventListener('click', function(e) {
       pages.selectNext();
    });
  }

Другие вопросы по теме