Хобрук: Ваш путь к мастерству в программировании

Создать полимерный элемент с помощью класса ES6?

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

Однако Polymer, похоже, игнорирует методы жизненного цикла класса. Следующий код не запускается #created. Есть ли обходной путь?

//attempt 1
class CustomElement {

  is = 'sample-multi-view-polymer-buic'

  created() { console.log('created') } // never called
}

export default Polymer(new CustomElement()) // doesn't work (see error below)

Поскольку я использую Babel для преобразования ES6 в ES5, вышеприведенный код эквивалентен приведенному ниже коду. Это также не работает.

 // attempt2
function CustomElement() {

  this.is = 'sample-multi-view-polymer-buic'
}

CustomElement.prototype.created= function() { console.log('hi') } //never called

Ответы:


1

В документации есть статья об использовании ES6 с Polymer.


Итак, с вашей стороны не хватает двух вещей:

  • Вам не хватает метода beforeRegistered().
  • Вам нужно использовать Polymer() для создания экземпляра класса вашего элемента.

Вот как я это делаю:

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">

<dom-module id="x-example">

  <template>
    <paper-input value="{{name::input}}"></paper-input>
    <h4>{{name}}</h4>
  </template>
  
  <script>
    "use strict";

    class xExample {

      beforeRegister() {
        this.is = "x-example";
        this.properties = {
          name: {
            type: String,
            value: "I'm a data-binded prop"
          }
        }
      }

      ready() {
        console.log("ready");
      }
    }

    Polymer(xExample);
  </script>

</dom-module>

<x-example></x-example>

Примечание.

  • Приведенный выше фрагмент работает только в Chrome/FF.
  • Для всего остального можно, конечно, "бабелизовать".
18.04.2016
  • Да, я в конце концов нашел эту статью. Есть один важный нюанс — вы не можете определять какие-либо свойства в классе. Вы должны определить их для этого объекта в #beforeRegister... Это было очень запутанно. 19.04.2016
  • Здесь то же самое, но я быстро разобрался 19.04.2016
  • Да, я пишу фреймворк с использованием Polymer... это означает кривую обучения для других разработчиков (и странные ошибки). Придется написать помощника для проверки классов Polymer. 20.04.2016
  • Новые материалы

    5 проектов на Python, которые нужно создать прямо сейчас!
    Добро пожаловать! Python — один из моих любимых языков программирования. Если вы новичок в этом языке, перейдите по ссылке ниже, чтобы узнать о нем больше:

    Dall-E 2: недавние исследования показывают недостатки в искусстве, созданном искусственным интеллектом
    DALL-E 2 — это всеобщее внимание в индустрии искусственного интеллекта. Люди в списке ожидания пытаются заполучить продукт. Что это означает для развития креативной индустрии? О применении ИИ в..

    «Очень простой» эволюционный подход к обучению с подкреплением
    В прошлом семестре я посетил лекцию по обучению с подкреплением (RL) в моем университете. Честно говоря, я присоединился к нему официально, но я редко ходил на лекции, потому что в целом я нахожу..

    Освоение информационного поиска: создание интеллектуальных поисковых систем (глава 1)
    Глава 1. Поиск по ключевым словам: основы информационного поиска Справочная глава: «Оценка моделей поиска информации: подробное руководство по показателям производительности » Глава 1: «Поиск..

    Фишинг — Упаковано и зашифровано
    Будучи старшим ИТ-специалистом в небольшой фирме, я могу делать много разных вещей. Одна из этих вещей: специалист по кибербезопасности. Мне нравится это делать, потому что в настоящее время я..

    ВЫ РЕГРЕСС ЭТО?
    Чтобы понять, когда использовать регрессионный анализ, мы должны сначала понять, что именно он делает. Вот простой ответ, который появляется, когда вы используете Google: Регрессионный..

    Не зря же это называют интеллектом
    Стек — C#, Oracle Опыт — 4 года Работа — Разведывательный корпус Мне пора служить Может быть, я немного приукрашиваю себя, но там, где я живу, есть обязательная военная служба на 3..