Question

可以将自定义j传递给窗口小部件，如documentation中所述。在我的例子中，自定义js是这样的：

function setUpImagePreview(inputId, imgId) {
...
}

window.onload = function() {
    // IDs hardcoded, VERY BAD! How to solve this?
    setUpImagePreview('id_brand_logo', id_brand_logo_img');
};

我用它来控制forms.FileField上的一些效果。这里重要的是ID与我正在呈现的特定字段相关。表格中可能会有多个这样的字段，所以我需要能够：

将元素ID（id_brand_logo和id_brand_logo_img）传递给脚本
为每个Widget运行脚本，而不只是为整个页面运行一次

这可以通过django Widgets / Forms实现吗？

Answer 1

对你的要求做了一些假设，我的建议是你的JS应该只依赖你的小部件生成的HTML。

假设您在某个预定义的类.my-widget-class（your question on how to do this）内呈现每个小部件。然后，您可以使用常规JS查询选择器方法（document.querySelectorAll('.my-widget-class')）或类似jQuery的库查找DOM中的所有输入，并执行您需要的任何操作。

任何需要从服务器发送的任意数据都可以作为表单字段/小部件中指定的数据属性发送，例如：

class MyForm(forms.Form):
    brand_logo = forms.FileField(widget=ClearableFileInput) # Or some custom widget
    brand_logo.widget.attrs['data-something'] = 'custom-data-here'

...您可以使用标准的JS getAttribute方法在DOM中访问它。

如果它是ModelForm并且您需要将一些与实例相关的信息传递给窗口小部件，那么您需要在窗体的__init__方法之后执行此步骤已绑定到模型实例：

class MyForm(forms.Form):

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        # Check if the form is bound to an instance first
        if hasattr(self, 'instance'):
            self.fields['brand_logo'].widget.attrs['data-something'] = 'custom-data-here'

如何将参数传递给widget js资产？

1 个答案: