如何将参数传递给小部件 js 资产？

Question

可以将自定义 js 传递给小部件，如 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）传递给脚本
运行每个小部件的脚本，而不是整个页面的脚本

这可以用 django 小部件/表单实现吗？

Answer 1

假设您的要求是什么，我的建议是您的 JS 应该只依赖于您的小部件生成的 HTML。

假设您在某个预定义的 class .my-widget-class () 内渲染每个小部件。然后，您可以使用普通的 JS 查询选择器方法 (document.querySelectorAll('.my-widget-class')) 或类似 jQuery 的库在 DOM 中找到所有输入，并执行您需要的任何操作。

任何需要从服务器发送的任意数据都可以作为field/widget形式指定的数据属性发送，例如：

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'

如何将参数传递给小部件 js 资产？

How to pass parameters to widget js asset?

javascript

django

django-forms

django-widget