javascript - Django ；在自定义小部件中向媒体文件添加变量

Question

我想制作一个包含一些媒体文件的小部件，并且我希望能够传递媒体文件有权访问的参数。

# in forms.py
class aCustomWidget(forms.TextInput):
    class Media:
        css = {
            'all': ('pretty.css',)
        }
        js = ('animations.js',)

例如，在animation.js中我有{{ my_variable }}。我的问题是，如何以如下方式填充“animation.js”内的 {{ my_variable }}:

# in forms.py
class myForm(forms.Form):
    a_field = aCustomWidget(my_variable="#_a_string_variable")

谢谢您，欢迎随时要求澄清。

Answer 1

您实际上无法向 JS 文件添加变量，因为 JS 不像模板那样被解析。它是静态的。传递变量的唯一方法是将其包含在模板代码的内联脚本中:

<script type="text/javascript">
    var my_variable = '{{ my_variable }}`;
</script>

但是，Django 甚至不在小部件代码上使用模板解析器。默认渲染方法直接返回现成的 HTML。这其实并不是一个问题；你只需要以不同的方式处理它。

因此，首先，您需要真正能够在小部件的实例化中接受变量。你可以这样做:

class aCustomWidget(forms.TextInput):
    def __init__(self, *args, **kwargs):
        self.my_variable = kwargs.pop('my_variable')
        super(aCustomWidget, self).__init__(*args, **kwargs)

然后，在您的 render 方法中，您可以访问该实例变量以将其添加到您的输出中:

from django.utils.safestring import mark_safe

...

def render(self, name, value, attrs):
    output = super(aCustomWidget, self).render(name, value, attrs)
    if self.my_variable is not None:
        output += u'<script type="text/javascript">var my_variable = "%s";</script>' % self.my_variable
    return mark_safe(output)

最后，在您的 JS 中只需使用该全局变量即可。显然，您需要确保代码在页面渲染完成后运行，以便变量可用。另外，由于您在这里处理的是全局变量，因此您应该注意您的命名。