如何在 Django admin 中向第三方外部 jQuery 插件提供 $

Question

我在我的 Django 管理基本模板中包含了几个第三方 jQuery 插件，它们假定“$”可用。

对于我自己的代码，我一直很乐意这样做

(function($) {
    my_code = 'here';
})(django.jQuery);

但是我怎样才能将“$”提供给位于外部文件中的其他人的代码？

<script src="{{ STATIC_URL }}js/jquery.json-2.2.min.js" type="text/javascript"></script>

抱怨“$”是未定义的。我试过把

<script type="text/javascript">var $ = django.jQuery;</script>

在该外部引用之前，但无济于事（顺便说一句，这是为什么？我知道加载是同时发生的，但是执行？我可以在定义它后立即使用那个“$”。）。

我对 Django 管理员提供的 jQuery 版本很满意，并且真的不想加载另一个版本。我也不想编辑别人的插件，让它以上面的“$”重新定义开始。 编辑：我也不想像我自己的代码一样包装它，我根本不想碰这些文件。

我真的必须求助于将 $.getScript() - http://api.jquery.com/jQuery.getScript - 放入我的匿名函数来加载此类文件吗？

编辑：在实际查看外部文件 jquery.json-2.2.min.js 之后，我看到它已经被包装到一个假定“jQuery”可用而不是“$”的函数中。插入后

变量 jQuery = django.jQuery;

在外部参考之前，它工作正常。但这真的应该这样做吗？

Answer 1

通过在应用的 staticfiles 目录中创建一个具有相同名称和路径的文件来覆盖 django 的 staticfile admin/js/jquery.init.js。

原文是这样的

/* Puts the included jQuery into our own namespace using noConflict and passing
 * it 'true'. This ensures that the included jQuery doesn't pollute the global
 * namespace (i.e. this preserves pre-existing values for both window.$ and
 * window.jQuery).
 */
var django = {
    "jQuery": jQuery.noConflict(true)
};

只需删除.noConflict(true)。

Answer 2

对于第三方插件，通常最好在 之前加载您自己的 jQuery 副本，包括其他插件。对于 Django 1.4+，在相应的 admin.py 文件中可能如下所示：

class Media:
    js = (
        'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
        '/static/js/third_party_plugin.js',
    )

如果你的插件确实不依赖于最新版本的jQuery，你也可以通过在插件顶部定义$和jQuery来使用Django包含的版本：

var jQuery = django.jQuery, $ = jQuery;

从 1.6 版开始，Django 将随 jQuery 1.9.1 一起发布。在此之前，使用的是 jQuery 1.4，它不适用于很多新的/更新的插件。

Answer 3

是的，我记得这个问题。我感觉到你的痛苦。

一个很好的解决方法是重组 js 文件，使 Django 可以将它们作为 URL 读取。在您的 URLs 文件中，添加以下模式：

urlpatterns = patterns((r"^js(?:/(?P<type>\w+))?", "app.views.render_js"))

现在，在您的 init.py 中，添加以下代码：

JS_FILES = {"name" : "name.js",
            "thing" : "thing.js"};

def render_main_js(req, type = None) :
    return render_to_response(JS_FILES.get(type, "main.js"), mimetype="text/javascript");

一旦代码到位并假设您的 javascript 文件位于 /js/* 中，您可以使用以下代码包含您的 javascript：

<script type="text/javascript" src="/js/name"></script>
<script type="text/javascript" src="/js/thing"></script>