javascript - 如何在 Flask 应用程序中使用 Polymer 元素作为静态资源?
问题描述
我正在使用 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>
聚合物开关.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 文件,然后导入它会警告我到 3 月将不再支持它,并且不会呈现自定义元素。
在以下情况下很难弄清楚它应该如何工作:
Polymer 正在进行第三次修订,因此我查找的每个教程可能都没有正确的语法。
我正在尝试以非标准方式使用它(据我所知),将其作为附加组件而不是单页应用程序。
我可以完全理解如何将 javascript 文件构建成单个 javascript 文件,然后我可以将其导入我的页面并使用。
解决方案
推荐阅读
- php - Need to insert in products table from more than one tables with dynamic user id
- selenium - 如何在 xpath 表达式中添加 OR 逻辑?
- c# - Oauth2 使用 ASP .net 核心 MVC 登录到 Google api
- javascript - Show all DOM nodes in html div
- sql - SequoiaDB查询时如何选择索引扫描或表扫描?
- javascript - JavaScript 与 Node.js
- c# - 在VS2017中使用mingW编译的dll
- flutter - Flutter Scoped Model - Passing multiple Models
- css - Background image blurry on small screens (looks fine in Wordpress/Chrome editors, but on actual phone it's blurry
- php - 使用 GRAPHQL 调用 API 的 PHP cURL