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

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 中使用那个全局变量。您显然需要确保您的代码在页面完成渲染后运行，以便变量可用。此外，由于您在这里处理的是全局变量，因此您应该注意自己的名称。

Answer 2

这肯定会奏效：

$('#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>