7

这个问题与

Django：将 Javascript 添加到自定义小部件的最佳方式

但不一样。

最初的问题询问如何将支持 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 对功能至关重要。解决这个问题的最佳方法是什么？

4

4 回答 4

5

从文档：

资产插入 DOM 的顺序通常很重要。例如，您可能有一个依赖于 jQuery 的脚本。因此，组合 Media 对象会尝试保持资产在每个 Media 类中定义的相对顺序。

考虑这个例子：

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 是根据表单中调用它们的顺序来呈现它们的，而不是定义类的顺序。如果要更改此示例中的顺序，只需交换 positionfield1和field2in 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属性检查给定的文件路径是否包含httpor https，并且仅将您的设置附加STATIC_URL到相对的文件路径中。

另请注意，重复的文件名会被自动删除，因此我认为最好在每个需要它https://code.jquery.com/jquery-3.4.1.js的小部件的开头包含 a 。这样，无论您以什么顺序呈现它们，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>

我尝试了各种包含数字的名称组合，但我无法遵循逻辑，所以我认为这是一个错误。

于 2019-09-09T04:50:24.300 回答
3

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

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

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

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

请参阅MDN。

于 2019-09-05T05:01:36.593 回答
1

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

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

<!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>

希望这会有所帮助！

于 2019-09-05T11:12:55.160 回答
0

您应该将 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())
于 2015-08-26T15:50:50.970 回答