姜戈;在自定义小部件中向媒体文件添加变量

Django; adding variable to media files in a custom widget

本文关键字:媒体文件 添加 变量 自定义 小部 姜戈      更新时间:2023-09-26

我想制作一个包含一些媒体文件的小部件,并且我希望能够传入媒体文件可以访问的参数。

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

例如,在动画中.js我有{{my_variable}}。我的问题是,我如何以这样的方式在"动画.js"中填充 {{ my_variable }}:

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

谢谢,请随时要求澄清。

您实际上无法将变量添加到 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中,只需利用该全局变量。您显然需要确保代码在页面完成呈现后运行,以便变量可用。另外,由于您在这里处理的是全局变量,因此您应该注意其名称。

这肯定会起作用:

$('#search-form .term').bind('input', function(){
 console.log('this actually works');
});
<form id="search-form">
 <input type="text" class="term" name="Search" value="Search" 
     autocomplete="off" />
 <input type="submit" name="Search" value="Search" />
</form>