根据用户输入更改 wagtail 管理表单字段

Question

我有一个名为 'Block' 的模型，它有多个字段：

类型。这是一个下拉菜单，您可以在其中 select 3 个选项。
URL
搜索

根据类型字段，必须显示 URL 或搜索。搜索字段需要使用变量执行搜索：API_HOST。我编写了 JS 来使表单动态化，并且扩展了 wagtailadmin/pages/edit.html 模板以注入 JS。但是，我不确定如何将 API_HOST（在 dev.py 中定义）传递给模板。

dev.py

API_HOST = "http://localhost:8000/"

wagtailadmin/pages/edit.html:

{% extends "wagtailadmin/pages/edit.html" %}
{% block extra_js %}
    {{ block.super }}

    <script>
        var api_host = "{{api_url}}";
        console.log("api_host:", api_host);
    </script>
    <script src="/static/js/blocks_hook.js">
    </script>
{% endblock %}

blocks_hook.js

$(function () {
        var $type = $('#id_type');
        var $search = $('#id_search');
        var $url = $('#id_url');
        var api = new API(api_host);

        hide($search);
        hide($url);

        $type.on('change', function(){
            if ($type.val() == 'search') {
                 show($search);
                 hide($url);
                 api.getProduct(function(product){
                      // .. do something with the product
                 });
            } else if($type.val() == 'url') {
                 show($url);
                 hide($search);
            }
});

我应该如何处理这种情况？

Answer 1

我设法使用 Wagtail 提供的 insert_editor_js hook mechanism 解决了这个问题。

确保您在方法中传递的变量 (@hooks.register) 确实存在于您的配置文件中，否则挂钩系统会在没有任何可操作的调试信息的情况下崩溃。

根据用户输入更改 wagtail 管理表单字段

Change wagtail admin form fields based on user input

wagtail