时间戳

首页 > 解决方案 > Use Polymer3 with django

python - Use Polymer3 with django

问题描述

How to import basic polymer 3 components like paper-elements and iron elements in django.

Polymer1 components(html pages) can be imported using materialdjango, but it does not support polymer3. see documentation:-documentation of material django

error while trying to import paper button element

Uncaught TypeError: Failed to resolve module specifier "@polymer/iron-flex-layout/iron-flex-layout.js". Relative references must start with either "/", "./", or "../".

base.html

<!-- templates/base.html -->
{% load static %}
{% load polymerdep %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>{% block title %}Django {% endblock %}</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>

  <script src="{% static "node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" %}"></script>
  <script type="module" src="{% static "src/components-app/components-app.js" %}"></script>
  <script type="module" src="{% static "src/components-app/header-element.js" %}"></script>
  <script type="module" src="{% static "src/components-app/button-element.js" %}"></script>
  <script type="module" src="{% static "src/components-app/dropdown-element.js" %}"></script>
  <script type="module">
    import '../static/node_modules/@polymer/paper-button/paper-button.js';
  </script>
  {% block link %} {% endblock %}
</head>
<body>
  <main>
    {% block content %}
    {% endblock %}
  </main>
</body>
</html>

Here the "link" is actually paper button defined in 

{% extends 'base.html' %}

{% block title %}Welcome
{% endblock %}

{% block content %}
<h1>Testtt</h1>

<a href="{% url 'login' %}">login</a>
<a href="{% url 'signup' %}">signup</a>
<button-element title='test'></button-element>
<dropdown-element></dropdown-element>
<paper-button class="pink" >link</paper-button>
{% endblock %}

标签： pythondjangopolymer-3.x

解决方案

推荐阅读