时间戳

首页 > 解决方案 > 如何通过 jinja 将变量传递给 litelement？

flask - 如何通过 jinja 将变量传递给 litelement？

问题描述

我正在使用烧瓶来提供这个 html 文件。它使用 jinja 来显示烧瓶中提供的数据。我可以说数据在那里，但我不确定如何将它传递给我的 lit 元素。

  <head>
    <meta charset="utf-8">
    <title>title</title>
    <script type="module" src="{{ bundle }}"></script>
    <script>
      var data = {{ data|tojson }};
    </script>
  </head>
  <body>

    User: {{ data.user }}

    <app-home .user="${data.user}" ></app-home>
  
  </body>
</html>

神社代码User: {{ data.user }}，按预期工作。但是，在 litelement (AppHome) 中，用户是未定义的。

我在格式上尝试了一些不同的变体，例如.user="{{data.user}}"，但我没有成功地将数据传递给 litelement。

编辑以添加点亮代码

import { html, LitElement, property, customElement } from 'lit-element/lit-element.js';

@customElement('app-home')
export class AppHome extends LitElement {
  @property({type: String}) user?: string;

  render() {
    return html`
      <p>user: ${this.user}</p>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'app-home': AppHome;
  }
}

litelement 按预期工作，如果我单独获取它，甚至可以呈现用户。

标签： flaskjinja2lit-element

解决方案

推荐阅读