Django/Wagtail - 自定义表单小部件 CSS/JS 媒体未使用模板文件渲染

Question

我有一个Address带有字段的基本模型formatted_address，它使用自定义LocationPicker小部件（本质上是用于搜索地址的自动完成功能）。

有几个类继承自Address，包括Place下面我的类。

模型.py

class Address(models.Model):
    formatted_address = models.CharField(max_length=500, verbose_name='address')
    ...

    class Meta:
        abstract = True


class Place(ClusterableModel, Address)
    ...

    panels = [
        MultiFieldPanel([
            FieldPanel('formatted_address', widget=LocationPicker(attrs={'placeholder': 'Search addresses')),
            FieldPanel('some_other_field')
        ], heading='My field group')

小部件.py

class LocationPicker(WidgetWithScript, TextInput):
    template_name = 'places/forms/widgets/location_picker.html'

    @property
    def media(self):
        print('get media')
        return Media(
            css={'screen': ('places/css/location-picker.css',)},
            js=('places/js/location-picker.js',),
        )

这个小部件在 Wagtail 管理员中显示得很好，我已经ModelAdmin为其注册了一个实例。

但是，我遇到的问题是我无法让小部件在我的 vanilla Django 中正确显示ModelForm。小部件模板文件已呈现，但不包括关联的媒体。

我创建的表格如下：

表格.py

class PlaceForm(ModelForm):

    class Meta:
        model = Place
        fields = '__all__'
        widgets = {
            'formatted_address': LocationPicker(attrs={'placeholder': 'Search addresses')
        }

无论我尝试什么，呈现表单时都不会包含小部件的媒体。打印'get media'输出甚至没有出现。

我确信这是可以做到的，但我不知道我在这里错过了什么明显的事情。

Answer 1

您需要在模板上的某个位置输出{{ form.media }}（或{{ form.media.js }}和{{ form.media.css }}） - 这不会在渲染表单本身时自动发生。