在Odoo中通过扩展视图和控制器实现前端元素操作

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

    // 引入Odoo核心模块
    var FormController = require('web.FormController');
    var FormView = require('web.FormView');
    var viewRegistry = require('web.view_registry');
    var _ = require('underscore'); // 引入Underscore.js工具库

    /**
     * 扩展FormController，添加自定义事件处理逻辑。
     * FormController负责处理视图中的用户交互。
     */
    var CustomController = FormController.extend({

        /**
         * 扩展事件映射。
         * `events`对象定义了DOM事件及其对应的处理函数。
         * 使用`_.extend`可以安全地合并父类的事件，并添加或覆盖自定义事件。
         * 语法：'事件类型 选择器': '处理函数名'
         */
        events: _.extend({}, FormController.prototype.events, {
            'keyup input': '_onInputKeyup', // 监听所有input元素的keyup事件
        }),

        /**
         * 自定义键盘抬起事件处理函数。
         * 当任何input元素发生keyup事件时，此函数将被调用。
         * @param {Event} ev - DOM事件对象
         */
        _onInputKeyup: function (ev) {
            console.log('Input keyup event detected: ', ev.target.value);
            // 在这里可以添加您的自定义逻辑，例如：
            // - 获取当前输入框的值
            // - 根据值进行实时验证或UI更新
            // - 调用Odoo的RPC服务进行后端交互
            // var $input = $(ev.target);
            // if ($input.attr('name') === 'my_specific_field') {
            //     // 对特定字段进行处理
            // }
        },

        // 您还可以在这里重写或添加其他控制器方法，例如：
        // init: function () {
        //     this._super.apply(this, arguments);
        //     // 控制器初始化逻辑
        // },
        // _onButtonClicked: function (ev) {
        //     this._super.apply(this, arguments);
        //     // 扩展按钮点击逻辑
        // }
    });

    /**
     * 扩展FormView，将其控制器替换为我们自定义的CustomController。
     * FormView负责渲染表单结构。
     */
    var CustomFormView = FormView.extend({
        config: _.extend({}, FormView.prototype.config, {
            Controller: CustomController, // 将默认控制器替换为CustomController
        }),
    });

    /**
     * 将我们自定义的视图注册到Odoo的视图注册表中。
     * 'custom_form' 是一个唯一的标识符，用于在XML视图中引用此自定义视图。
     */
    viewRegistry.add('custom_form', CustomFormView);

    // 导出自定义控制器和视图，以便其他模块可以引用
    return {
        CustomController: CustomController,
        CustomFormView: CustomFormView,
    };
});

{
    'name': 'My Custom Module',
    'version': '1.0',
    'summary': 'Module for custom Odoo frontend behaviors',
    'depends': ['web'], # 确保依赖web模块
    'data': [
        # ... 其他XML数据文件
    ],
    'assets': {
        'web.assets_backend': [
            'MODULE_NAME/static/src/js/custom_form_view.js',
        ],
        # 如果是前端网站资产，可以使用 'web.assets_frontend'
    },
    'installable': True,
    'application': False,
}

<record id="view_my_model_form" model="ir.ui.view">
    <field name="name">my.model.form</field>
    <field name="model">my.model</field>
    <field name="arch" type="xml">
        <!-- 关键：添加 js_class 属性 -->
        <form js_class="custom_form" string="My Model Form">
            <sheet>
                <group>
                    <field name="name"/>
                    <field name="description"/>
                    <!-- 其他字段 -->
                </group>
            </sheet>
        </form>
    </field>
</record>