将 Javascript 添加到自定义小部件

Question

此问题与

相关

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 对函数至关重要。解决此问题的最佳方法是什么？

Answer 1

您应该将 JS 初始化为：

<script type="text/javascript">
$( document ).ready(function() {
    var some-generated-options = {};
    $('#some-generated-id').datetimepicker(some-generated-options);
});
</script>

像你一样，我也有自己的自定义小部件，看起来像：

class DaysInput(TextInput):
    def render(self, name, value, attrs=None):
        result = super(DaysInput, self).render(name, value, attrs)
        return u"""
            %s
            <script type="text/javascript">
            $( document ).ready(function() {
                $('a.id_days').click(function(e){
                    e.preventDefault();
                    $('input#id_days').val($(e.currentTarget).attr('attr-value'));
                });
            });
            </script>
            <a href="#" class="id_days" attr-value='1'>1d</a>
            <a href="#" class="id_days" attr-value='2'>2d</a>
            <a href="#" class="id_days" attr-value='3'>3d</a>
        """ % result


class TestForm(forms.ModelForm):
    days = forms.IntegerField(widget=DaysInput())

Answer 2

由于 JavaScript 是内联脚本，您将需要使用本机 DOMContentLoaded 事件来等待 jQuery 加载。

<script>
    window.addEventListener('DOMContentLoaded', function() {
        (function($) {
            $('#some-generated-id').datetimepicker(some-generated-options);
        })(jQuery);
    });
</script>

或者，如果您可以将代码放入外部脚本文件，则可以使用 script 标记的 defer 属性。

<script src="myfile.js" defer="defer"></script>

参见MDN。

Answer 3

您想在添加的div上执行一些插件脚本。您需要 将 class 添加到您的元素 并将自定义事件关联到 class。这将执行您想要的功能或脚本。

要将自定义事件关联到动态添加的节点，请参考下面的代码。

<!DOCTYPE html> <html> <head> <title>adding javascript to custom widgets</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <section class="team"> <div class="container"> <div class="row"> <div class="container maxwidth"> <button data-tab="tab1" class="active">AA<span></span></button> </div> <div class="maincontent"></div> </div> </div> </section> <script> $(function(){ $(".active").click(function(){ $(".maincontent").append("<div class='scroll'><h2>Hello</h2><div style='background:red; height:500px;'></div></div>") $(".maincontent").find(".scroll").trigger('dynload'); }); $('.container').on('dynload', '.scroll', function(){ console.log("Append event fired"); // Additinal Script resource you want to load for plugin $.getScript("Custom_Scrollbar.min.js") //script URL with abosolute path .done(function() { // Script loaded successfully calling of function $(".scroll").mCustomScrollbar({ }); }) .fail(function() { // Give you error when script not loaded in browser console.log('Script file not loaded'); }) }) }) </script> </body> </html>

希望这会有所帮助！

Answer 4

来自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 in 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 添加到自定义小部件

Adding Javascript to Custom widgets

javascript

jquery

python

django

django-custom-field