html - 在聚合物中传递阵列

标签 html polymer-3.x

如何改变从聚合物网络组件中的外部 html 文件传递​​的数组

如前所述here ,当数组在组件内部重新创建时,它可以被访问。我的问题是如何访问传递的数组

html代码:

{% 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 users='{{users}}'></dropdown-element>
{% if users %}
<p>test</p>
<p>{{ users }}</p>
<p>{{ users.1 }}</p>
{% endif %}

{% endblock %}

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/dropdown-element.js" %}"></script>
  {% block link %} {% endblock %}
</head>
<body>
  <main>
    {% block content %}
    {% endblock %}
  </main>
</body>
</html>

数组内容

users=['test1','test2','test3','test4']

聚合物js文件

import { html, PolymerElement } from '../../node_modules/@polymer/polymer/polymer-element.js';
import '../../node_modules/@polymer/polymer/lib/elements/dom-repeat.js';

/**
 * @customElement
 * @polymer
 */
class DropdowmElement extends PolymerElement {
  static get template() {
    return html`
      <style>
      </style>

      <template is="dom-repeat" items="[[users]]"><p>{{item}}</p></template>



    `;
  }

  static get properties() {
    return {
      users: {
        type: Array,
      }
    }
  }
  constructor() {
    super();
  }


}

window.customElements.define('dropdown-element', DropdowmElement);

数据正在加载到 html 文件中,控制台中没有列出任何错误

最佳答案

如果我正确理解您的代码,则用户会在您使用它的范围之外的某个地方定义。 你能链接到代码运行的位置吗?

关于html - 在聚合物中传递阵列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54801623/

相关文章:

javascript - 获取或设置对象内的 localStorage 值

javascript - 内联代码在 asp 上不起作用 :Button

javascript - 将 Polymer 3 路由更改为不同的 html 页面

polymer - 在 polymer 3 中导入外部样式表

polymer-3.x - 如何在 polymer 3 预览中使用自定义样式或共享样式

CSS 获取一层覆盖另一层

html - Flex 容器获取高度错误的 Safari

javascript - 使用动态创建的链接进行 HTML5 导入

web-component - LitElement 加载外部脚本

javascript - 鼠标悬停事件 Lit-Element/Polymer