使用Flask-Bootstrap时，在jquery-ui之前加载jquery

Question

我需要加载jquery的自动完成功能的jquery-ui，这是flask-bootstrap所没有的。我用下面这行代码将它添加到模板中

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js" ></script>

但是，我让Flask-Bootstrap加载jquery.js，它总是在模板加载jquery-ui之后加载它，所以jquery-ui失败了，因为它需要先加载jquery。

GET http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css [HTTP/1.1 200 OK 123ms]
GET http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css [HTTP/1.1 200 OK 181ms]
GET http://code.jquery.com/ui/1.11.2/jquery-ui.js [HTTP/1.1 200 OK 324ms]
GET http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.js [HTTP/1.1 200 OK 289ms]
GET http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js [HTTP/1.1 200 OK 111ms]
GET http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment-with-langs.min.js [HTTP/1.1 200 OK 175ms]
ReferenceError: jQuery is not defined jquery-ui.js:14:2
ReferenceError: $ is not defined

为了暂时解决这个问题，我修改了flask-bootstrap的__init.py__，以防止它加载jquery，并将其手动加载到模板中。这个页面可以工作，但其他所有页面都停止工作，因为jquery不再加载。

有没有办法确保flask-bootstrap先加载jquery，然后让模板加载jquery-ui，或者让flask-bootstrap加载jquery-ui本身？

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block head %}
    {{ super() }}
    <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js" ></script>
{% endblock %}

{% block title %}Project-Z{% endblock %}

{% block page_content %}
<div class="page-header">
    <h1> Members list </h1>
    <h2>Find a member</h2>
    <br>
    <div class="col-md-4">
        {{ wtf.quick_form(form) }}
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $( "#member_name" ).autocomplete({
            source: '{{url_for("main.autocomplete")}}',
            minLength: 2,
        });
    });
</script>
{% endblock %}

Answer 1

我不是把脚本放在头部，而是把它放在脚本部分，以便稍后在序列中加载。这样，在Flask-bootstrap jquery.js加载之后，它会正确加载。http://pythonhosted.org/Flask-Bootstrap/faq.html#how-can-i-add-custom-javascript-to-the-template

{% block scripts %}
  {{super()}}
   <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js" ></script>
{% endblock %}

Answer 2

如果在 jquery之后没有加载jquery-ui，在 bootstrap之前加载，那么一些引导JS效果可能会被破坏，比如在Bootstrap tooltip css not working中。

这并不理想，但这里有另一个解决方案。不要将super()添加到块中，而是直接复制原始内容，将jquery-ui导入添加到正确的位置。

{% block scripts %}
  <script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <!-- Add it here -->
  <script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
{% endblock %}

可以在项目模板https://github.com/mbr/flask-bootstrap/blob/3e2695bb36f29bf72befce86c9e63609c3016203/flask_bootstrap/templates/bootstrap/base.html#L26-L29中找到原始内容