时间戳

首页 > 解决方案 > 如何使用 flask/jinja 动态加载 d3 页面

javascript - 如何使用 flask/jinja 动态加载 d3 页面

问题描述

我目前正在一个使用flask的项目中工作，其中jinja通过块驱动前端，目标是创建一种动态页面。但是，我目前停留在如何引用新页面/组件而无需在导航时刷新它们。

例如，在当前版本中，如果我通过页面上的按钮导航“前进”，新页面（静态 html）会加载，但没有显示，如果我刷新页面，则该页面的内容会正确加载。如果我尝试加载包含静态内容（例如文本）的页面，它会在 bat 右侧正确加载。

到目前为止，我的理论是，这是因为我们在按下按钮时加载的 D3 图表加载速度不够快，无法立即调用，因此应该实施某种侦听器或延迟。

然而，问题是如何正确实施。

在应用程序的当前状态中，我们已经反转为在烧瓶中使用指向页面路由的 href 链接。我们试图放置一个“完成”检查器来查看内容加载功能是否运行，但没有成功。但是，我们可能错误地实现了该功能。

在第一个 html 模板中：

{% extends "index.html" %}
{% block content %}

<body>
  <div class="container-fluid">
    <h1 class="mt-4">Simple Sidebar</h1>
    <canvas id="chart_1", height=40></canvas>

    <div class="form-group">
      <label for="comment">Comment:</label>
      <textarea class="form-control" rows="5" id="comment"></textarea>
    </div>

    <button type="button" class="btn btn-default"><a href=" {{ url_for('step_2') }} ">Next</a></button>
    <script type="text/javascript">


    </script>
  </div>
  <script type="text/javascript" src="{{ url_for('static', filename='js/chart_1.js') }}"></script>


</body>

{% endblock content %}

路由到 Flask 中的下一个模板：

@app.route("/step_2")
def step_2():
    return render_template("chart_2.html", methods = ['GET'])

我没有收到任何错误消息，因为它有效，但不是预期的那样。

标签： javascriptpythond3.jsflaskjinja2

解决方案

推荐阅读