Question

我在自定义小部件的渲染html页面中有一个javascript代码。我想将js代码移动到单独的js文件中。

但是，它必须是动态的，而不是静态媒体文件。

我写了一个自定义小部件：

class CustomWidget(CustomWidgetBase):
    css = {
        'all': (
            config['custom_css'] +
            config['extra_css']
        )
    }
    js = (
        config['custom_js'] +
        config['extra_js']
    )

    @property
    def media(self):
        media = super(CustomWidget, self).media
        media.add_css(CustomWidget.css)
        media.add_js(CustomWidget.js)
        return media

    def render(self, name, value, attrs=None):
        attrs_for_textarea = attrs.copy()
        attrs_for_textarea['hidden'] = 'true'
        attrs_for_textarea['id'] += '-textarea'
        html = super(CustomWidget, self).render(name,                                                           value, attrs_for_textarea)

        html += render_to_string(
            'app/custom_widget.html',
            {
                'id': attrs['id'].replace('-', '_'),
                'id_src': attrs['id'],
                'value': value if value else '',
                'settings': json.dumps(self.template_contexts()),
                'STATIC_URL': settings.STATIC_URL,
                'CSRF_COOKIE_NAME': settings.CSRF_COOKIE_NAME,
            }
        )

        CustomWidget.js += (os.path.join(settings.STATIC_URL, 'app/my.js'),)

        return mark_safe(html)

'app / custom_widget.html'有javascript代码：

{% load staticfiles %}
<div id='{{ id_src }}'>{{ value|safe }}</div>
<script>
$(function() {
    var {{ id }}_textarea = window.document.getElementById('{{ id_src }}-textarea');
    ... omitted ...

我想将'app / custom_widget.html'中的javascript代码移到'app / my.js'中，因为它会使小部件代码依赖于javascript声明的顺序。

因此，'app / my.js'必须使用Django视图传递的值动态生成。我想将'app / my.js'放在页面底部。

谢谢。

Answer 1

两个选项：

您可以在模板的脚本标记中放置变量声明列表，确保在导入静态javascript之前声明它们。然后你的静态javascript引用它知道由服务器适当设置的变量值。
将动态值放在HTML元素的数据属性中。然后编写静态javascript，根据它操作的内容查找相应的服务器集数据。

您在示例代码中所做的事情看起来非常复杂，我不确定它是否必须如此。如果我正确解释，您正在尝试确保在插入自定义窗口小部件时，将对其应用自定义JavaScript行为。

我认为第二个选项更适合该行为，您应该使用jquery使其尽可能简单实现。

首先，在您的自定义窗口小部件的html模板中，为您的自定义窗口小部件提供一个类，让您的javascript知道如何应用自定义行为。

例如 <input class=“custom-behaviour-widget” data-id_name=“{{ id }}" data-other_variable_name=“other_variable-value" …>

然后编写看起来像的静态javascript：

<script>
$( document ).ready(function () {
    $(‘.custom-behaviour-widget’).each(
        value_that_i_want = $(this).data(‘id_name’);
        ...
    );
});
</script>

自定义小部件中的django动态javascript

1 个答案: