Odoo表单视图中自定义JavaScript行为与事件绑定教程

odoo.define("MODULE_NAME.custom_form", function (require) {
    "use strict";

    var FormController = require('web.FormController');
    var FormView = require = ('web.FormView');
    var viewRegistry = require('web.view_registry');

    // 1. 扩展 FormController
    //    添加自定义事件和事件处理方法
    var CustomController = FormController.extend({
        // 使用 _.extend 合并父类的事件映射和自定义事件
        events: _.extend({}, FormController.prototype.events, {
            'keyup input': '_onInputKeyup', // 绑定所有input元素的keyup事件
        }),

        /**
         * 自定义的keyup事件处理方法
         * @param {Event} ev - DOM事件对象
         */
        _onInputKeyup: function (ev) {
            console.log('用户在输入框中按键:', ev.target.value);
            // 在这里可以添加您的自定义逻辑，例如：
            // - 实时验证输入内容
            // - 根据输入动态修改其他字段或UI
            // - 调用RPC方法获取数据
        },

        // 您也可以在这里覆盖或扩展其他FormController的方法
        // 例如：renderButtons, _onSave, _onDiscard 等
    });

    // 2. 扩展 FormView
    //    将自定义的控制器与视图配置关联起来
    var CustomFormView = FormView.extend({
        config: _.extend({}, FormView.prototype.config, {
            Controller: CustomController, // 将我们自定义的控制器应用到此视图
        }),
    });

    // 3. 将自定义视图注册到视图注册表中
    //    'custom_form' 是一个唯一的标识符，将在XML视图中使用
    viewRegistry.add('custom_form', CustomFormView);

    // 返回自定义的控制器和视图，以便其他模块可以引用（可选）
    return {
        CustomController: CustomController,
        CustomFormView: CustomFormView,
    };
});

# MODULE_NAME/__manifest__.py
{
    'name': 'My Custom Module',
    'version': '1.0',
    'summary': 'Customizations for Odoo forms',
    'depends': ['web'], # 确保依赖 'web' 模块
    'assets': {
        'web.assets_backend': [
            'MODULE_NAME/static/src/js/custom_form_view.js',
        ],
    },
    'installable': True,
    'application': False,
    'auto_install': False,
}

<!-- MODULE_NAME/views/your_model_views.xml -->
<record id="view_your_model_form_custom" model="ir.ui.view">
    <field name="name">your.model.form.custom</field>
    <field name="model">your.model</field>
    <field name="inherit_id" ref="your_module.view_your_model_form"/> <!-- 如果是继承现有视图 -->
    <field name="arch" type="xml">
        <form js_class="custom_form" position="attributes">
            <!-- 这里可以放置其他字段或元素的修改 -->
        </form>
    </field>
</record>

<!-- 如果是全新的表单视图 -->
<record id="view_your_model_form_new" model="ir.ui.view">
    <field name="name">your.model.form.new</field>
    <field name="model">your.model</field>
    <field name="arch" type="xml">
        <form string="Your Model Form" js_class="custom_form">
            <sheet>
                <group>
                    <field name="name"/>
                    <field name="description"/>
                </group>
            </sheet>
        </form>
    </field>
</record>