Question

我有一个使用模板的简单Flask应用程序。

每次我单击导航中的某个位置（在base.html中）都会刷新整个页面，我宁愿它只是在模板内部刷新，因为导航栏中有可折叠的元素，当整个页面被重新加载。

当我单击导航栏中的链接时，如何重新加载要渲染的新模板而不是导航栏？

作为参考，下面是一些代码：

base.html

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <script>
      // Hide submenus
      $('#body-row .collapse').collapse('hide');

      // Collapse/Expand icon
      $('#collapse-icon').addClass('fa-angle-double-left');

      // Collapse click
      $('[data-toggle=sidebar-colapse]').click(function() {
          SidebarCollapse();
      });

      function SidebarCollapse () {
          $('.menu-collapsed').toggleClass('d-none');
          $('.sidebar-submenu').toggleClass('d-none');
          $('.submenu-icon').toggleClass('d-none');
          $('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');

          // Treating d-flex/d-none on separators with title
          var SeparatorTitle = $('.sidebar-separator-title');
          if ( SeparatorTitle.hasClass('d-flex') ) {
              SeparatorTitle.removeClass('d-flex');
          } else {
              SeparatorTitle.addClass('d-flex');
          }

          // Collapse/Expand icon
          $('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
      }
    </script>
    <style>
    </style>

    {% include 'nav-mini.html' %}

    <!-- Bootstrap row -->
    <div class="row" id="body-row">

        {% include 'nav-side.html' %}

        <!-- MAIN -->
        <div class="col py-3">
          <article class=flashes>
            {% with messages = get_flashed_messages() %}
              {% if messages %}
                <ul>
                  {% for message in messages %}
                    <li>{{ message}}</li>
                  {% endfor %}
                </ul>
              {% endif %}
            {% endwith %}
          </article>

          {% block content %}
          {% endblock %}
        </div>
        <!-- Main Col END -->

    </div>
    <!-- body-row END -->
  </body>
</html>

sidenav.html

<!-- Sidebar -->
<div id="sidebar-container" class="sidebar-expanded d-none d-md-block col-2">
    <ul class="list-group sticky-top sticky-offset">
      {% if sidenavs %}
        {% for heading, stuff in sidenavs.items() %}
          <li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center menu-collapsed">
            <a href="#page{{heading}}" data-toggle="collapse" class="dropdown-toggle">
              <br />
              {{ heading }}
            </a>
          </li>
          <br />
          <ul class="collapse list-unstyled" id="page{{heading}}">
          {% for name, address in stuff.items() %}
            <a href="{{ address }}" class="bg-dark list-group-item list-group-item-action">
              <div class="d-flex w-100 justify-content-start align-items-center">
                <span class="fa fa-tasks fa-fw mr-3"></span>
                <span class="menu-collapsed">{{ name }}</span>
              </div>
            </a>
          {% endfor %}
          </ul>
        {% endfor %}
      {% endif %}
    </ul>
    <div class="footer">
      <h3><center>WCF Insurance</center></h3>
    </div>
</div>
<!-- sidebar-container END -->

App.py（烧瓶应用程序）

...
from flask import Flask, url_for, render_template, redirect, jsonify
...
app = Flask(__name__)
CWD = os.path.dirname(os.path.abspath(__file__))
...
@app.route('/bokeh-example')
def page_bokeh_example():
    ''' iframe for Bokeh Example '''
    resp = {
        'mininavs': get_mini_nav(),
        'sidenavs': get_side_nav(),
        'iframe_url': get_iframe_url('Bokeh Example'), }
    return render_template('iframe.html', **resp)
....
if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5020)

注意，我正在使用render_template()烧瓶函数。

烧瓶仅刷新页面的模板化部分

0 个答案: