这个问题是关于

Django: Best Way to Add Javascript to Custom Widgets

但不一样。

最初的问题询问如何将支持的 javascript 添加到自定义 django 小部件，答案是使用 forms.Media，但该解决方案对我不起作用。我的例子是这样的:

当以表单形式呈现时，小部件会创建一行，看起来像(玩具示例)这样:

<div id="some-generated-id">Text here</div>

现在，我还想在输出中添加另一行，如下所示:

<script>
$('#some-generated-id').datetimepicker(some-generated-options)
</script>

最初的想法是，当小部件被渲染时，div 和 script 都被渲染，但这是行不通的。问题在于 html 文档的结构如下所示:

-body
    - my widget
    - my widget's javascript
-script
    -calls to static files (jQuery, datetimepicker,...)

在浏览器中加载小部件的 javascript 代码时，尚未加载 jQuery 和 datetimepicker js 文件(它们在文档末尾加载)。

我无法使用 Media 执行此操作，因为我生成的选项和 ID 对于该功能至关重要。解决这个问题的最佳方法是什么？

最佳答案

从 docs 开始:

The order in which assets are inserted into the DOM is often important. For example, you may have a script that depends on jQuery. Therefore, combining Media objects attempts to preserve the relative order in which assets are defined in each Media class.

考虑这个例子:

class FooWidget(forms.TextInput):
    class Media:
        js = ('foo.js',)

class BarWidget(forms.TextInput):
    class Media:
        js = ('bar.js',)

class SomeForm(forms.Form):
    field1 = forms.CharField(widget=BarWidget)
    field2 = forms.CharField(widget=FooWidget)

    def __init__(self, *args, **kwargs):
        super(SearchForm, self).__init__(*args, **kwargs)

现在当您调用 form.media 时，脚本将呈现如下:

<script type="text/javascript" src="/static/bar.js"></script>
<script type="text/javascript" src="/static/foo.js"></script>

为什么 bar.js 在 foo.js 之前呈现？因为 django 根据它们在表单中被调用的顺序呈现它们，不是定义类的顺序。如果你想改变这个例子中的顺序，只需交换位置 field1 和field2 中的 SomeForm。

这对您使用 jQuery 有何帮助？您可以通过自定义小部件呈现 jQuery CDN 脚本:

class FooWidget(forms.TextInput):
    class Media:
        js = ('https://code.jquery.com/jquery-3.4.1.js', 'foo.js',)

class BarWidget(forms.TextInput):
    class Media:
        js = ('https://code.jquery.com/jquery-3.4.1.js', 'bar.js',)

现在你的 form.media 看起来像这样:

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="/static/bar.js"></script>
<script type="text/javascript" src="/static/foo.js"></script>

注意 /static/ 是如何没有附加到 jQuery CDN 的？这是因为 .media 属性检查给定的文件路径是否包含 http 或 https ，并且仅将您的 STATIC_URL 设置附加到相对的文件路径。

另请注意，重复的文件名会自动删除，所以我认为在每个需要它的小部件的开头包含一个 https://code.jquery.com/jquery-3.4.1.js 是一个很好的做法。这样，无论您以什么顺序呈现它们，jQuery 脚本都将始终出现在需要它的文件之前。

附带说明一下，在您的文件名中包含数字时我会小心。作为 Django 2.2，在尝试订购脚本时似乎存在错误。

例如:

class FooWidget(forms.TextInput):
    class Media:
        js = ('foo1.js', 'foo2.js',)

class BarWidget(forms.TextInput):
    class Media:
        js = ('bar1.js', 'bar13.js',)

class SomeForm(forms.Form):
    field1 = forms.CharField(widget=BarWidget)
    field2 = forms.CharField(widget=FooWidget)

    def __init__(self, *args, **kwargs):
        super(SearchForm, self).__init__(*args, **kwargs)

看起来像:

<script type="text/javascript" src="/static/bar1.js"></script>
<script type="text/javascript" src="/static/foo1.js"></script>
<script type="text/javascript" src="/static/bar13.js"></script>
<script type="text/javascript" src="/static/foo2.js"></script>

我尝试了各种包含数字的名称组合，但我无法理解其中的逻辑，因此我认为这是一个错误。

关于javascript - 将 Javascript 添加到自定义小部件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32213320/