Как использовать элементы Polymer в качестве статических ресурсов в приложении Flask? - PullRequest
Новая
       5

Как использовать элементы Polymer в качестве статических ресурсов в приложении Flask?

0 голосов
/ 14 февраля 2019

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

Единственный способ, с помощью которого я до сих пор работал, это:

flask_template.html 

{% extends "base.html" %}
<body>
    <base href="/demo_polymer">
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />
    {% block body %}
    <script src="/static/polymer-assets/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script type="module" src="/static/polymer-assets/polymer-switch.js"></script>
    <div id="switch">
        <div class="card">
            <div class="card-content">
                <span class="card-title">Switch</span>
                <form id="form_name">
                    <div>
                        <polymer-switch id="switch1" name="sliderSwitch" checked></polymer-switch>
                    </div>
                    <input id="testInputText" name="testInputText" type="text" value="testInputText">
                    <input type="submit" value="SUBMIT">
                </form>
            </div>
        </div>
    </div>
    {% endblock %}
</body>
</html>

Polymer-Switch.js 

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';

class PolymerSwitch extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {}
      </style>
      <div class="slider-switch" >
        <input class="slider-input" type="checkbox" checked={{checked}}>
        <div class="slider-groove">
          <span class="slider-button"></span>
          <span class="slider-content"></span>
        </div>
      </div>
    `;
  }
  static get properties() {
    return {
      checked: {
        type: Boolean,
        value: false
      }
    };
  }
  constructor() {
    super();
    console.log('slider-switch created!');
  }
  connectedCallback() {
    super.connectedCallback();
    console.log('slider-switch connected!');
  }
  ready() {
    super.ready();
  }
}
window.customElements.define('polymer-switch', PolymerSwitch);

И перейдите в каждый импортированный модуль JavaScript, чтобы заменить "@something ..." на "/ static/polymer-assets/node_modules/@something..."

Однако затем выполняется импорт каждого модуля, и я хочу просто импортировать один файл, который позволяет мне использовать элемент в любом месте шаблона колбы после импортафайл, описывающий это.Я не смог использовать команду "Polymer build --js-compile" (или любой другой вариант), чтобы дать мне файл, который я могу использовать.Обычно он дает мне HTML-файл и импортирует его, предупреждая, что он больше не будет поддерживаться к марту, и не отображает пользовательский элемент.

Просто сложно понять, как он должен работать, когда:

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

  • Я пытаюсь использовать его нестандартным способом (насколько я могу судить), используя его как дополнение, а не как одностраничное приложение.

  • Я вполне могу разобраться, как собрать файлы javascript в один файл javascript, который я затем смог бы импортировать на свою страницу и использовать.

...