将Polymer3与Django一起使用

时间:2019-02-20 07:42:57

标签: python django polymer-3.x

如何在Django中导入基本的聚合物3成分,例如纸质元素和铁元素。

Polymer1组件(html页面)可以使用materialdjango导入,但不支持polymer3。 请参阅文档:-documentation of material django

尝试导入纸张按钮元素时出错

 search(event) {
    if (event) {
      console.log(event, 'event');
    }
    vm.tabHeight = 385;
    vm.selectedContract = 0;
    vm.member = {};
    vm.finance = null;
    vm.accountId = null;
    vm.searchLoading = true;
    var searchText = vm.searchText;
    console.log(searchText, 'searchText')
    if (searchText) {
      searchText = searchText.replace(/\(/g, '');
      searchText = searchText.replace(/\)/g, '');
      searchText = searchText.replace(/\-/g, '');
      searchText = searchText.replace(/\&/g, '');
      console.log('here')
      vm.dashboardService.search(searchText)
        .subscribe(res => {
          console.log('got search response', res);
          vm.searchResult = res.hits;
          vm.searchLoading = false;
        }, err => {
          console.error('got search error', err);
          vm.searchLoading = false;
        });
    } else {
      vm.searchLoading = false;
    }
  }

base.html

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

“链接”实际上是在

中定义的纸张按钮
<!-- 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>

0 个答案:

没有答案