Wagtail：如何定义自定义块的js\u初始值设定项，以便子块的js_初始值设定项也能运行？

Question

我最初是在wagtail问题队列中提出这个问题的，我想这是不合适的。（尽管我确实认为这是documentation中的一个bug。）

总之，我的问题是我有一个自定义的StructBlock类，它在里面使用了ListBlock。我需要在我的自定义类上定义一个js_initializer()方法，该方法使窗体同时触发我自己的初始值设定项和ListBlock的初始值设定项。在

我最初的尝试，基于docs，如下所示：

# my_blocks.py
class ImageGalleryBlock(blocks.StructBlock):
    images = ListBlock(ImageChooserBlock(label='Image'))

    def js_initializer(self):
        return "ImageGallery"

    @property
    def media(self):
        return forms.Media(
            js=['app/js/admin/image-gallery.js']
        )


# image-gallery.js
function ImageGallery(prefix) {
    // Set up the Image Gallery block's custom form behavior...
}

这使ImageGallery()函数运行，但没有运行ListBlock的初始值设定项，因此它的按钮都不起作用。在

在wagtail问题队列中，建议我尝试以下操作：

^{pr2}$

为了使ImageGallery()部分正常工作，我对最初的建议做了一些改进，但是它仍然没有运行ListBlock初始值设定项。在

为ImageGalleryBlock生成的初始值设定项代码如下：

{
    'name': ('ImageGalleryBlock'),
    'initializer': (StructBlock({
        'images': (ListBlock({
            'definitionPrefix': ('blockdef-63')
        }))
    }),
    ImageGallery("blockdef-91"))
},

我觉得我实际上需要做的是给传递给StructBlock的dict添加另一个键，但我不知道该怎么做。在

Answer 1

js_initializer方法返回一个Javascript表达式，该表达式在页面加载时计算一次，并输出一个函数；然后，每次将块插入表单时，都会调用该初始值设定项函数，并传递ID前缀以标识应接收Javascript行为的HTML元素。重要的是要理解这是一个两步的过程-页面加载的初始评估（通常采用函数调用的形式，返回第二步中使用的函数），并为表单上的每个块调用初始值设定项函数。在

每当一个块像StructBlock那样充当其他块的包装器时，它就负责确保对其子块强制执行这个契约：当在页面加载时对其自身的js_initializer进行求值时，子{}也需要在该点求值，并且在调用其初始值设定项函数时，它调用那些子初始值设定项函数。在

通过子类化StructBlock并重写js_initializer，实际上是在StructBlock周围添加了另一层包装：新的js_initializer需要计算为一个函数，该函数既调用StructBlock的初始值设定项函数，又执行自定义的图像库设置。方法如下：

图像-画廊.js公司名称：

/* ImageGallery gets called once on startup; the function it returns will
be called whenever we need to set up an image gallery block on the form */
function ImageGallery(parentInitializer) {
    return function(elementPrefix) {
        /* call the original StructBlock initializer */
        parentInitializer(elementPrefix);

        /* do whatever JS setup you need for the image gallery behaviour */
        $('#' + elementPrefix + '-gallery').doStuff();
    };
}

我的_块.py公司名称：

^{pr2}$