本教程详细介绍了如何在odoo中通过扩展其客户端框架来实现表单视图的自定义javascript行为和事件绑定。我们将学习如何利用`js_class`属性、继承`formcontroller`和`formview`来添加自定义事件监听器，例如对输入框的`keyup`事件进行响应，从而实现更复杂的业务逻辑或数据验证，避免直接全局操作dom。
在Odoo的开发实践中，有时我们需要对表单视图中的元素进行更精细的客户端控制，例如在用户输入时实时进行数据验证、动态修改ui或触发特定操作。直接在html文件中注入jquery脚本虽然在某些场景下可行，但在Odoo的模块化和事件驱动架构中，更推荐使用其提供的继承机制来扩展现有功能。本文将指导您如何在Odoo中正确地扩展表单视图，以绑定自定义javaScript事件并实现所需逻辑。
核心概念：Odoo客户端框架与视图扩展
Odoo的客户端（前端）是基于OWL (Odoo Web Library) 和传统的jQuery/Underscore.js构建的，它提供了一套强大的视图组件和控制器。要自定义表单视图的行为，我们通常需要：
- FormController: 负责处理表单的业务逻辑和用户交互。通过扩展它，我们可以添加新的事件处理器。
- FormView: 负责将FormController与特定的视图配置关联起来。
- js_class 属性: Odoo xml视图中的一个属性，用于指定该视图应使用的自定义javascript类。
- events 映射: FormController中一个关键的属性，用于定义DOM事件与相应处理方法之间的映射关系。
通过继承这些核心组件，我们可以在不修改Odoo核心代码的情况下，安全且高效地实现自定义功能。
实现步骤
以下是如何在Odoo中扩展表单视图以绑定自定义事件的详细步骤。
立即学习“Java免费学习笔记（深入）”；
1. 创建自定义JavaScript模块
首先，在您的Odoo模块中创建一个新的JavaScript文件，例如 MODULE_NAME/Static/src/js/custom_form_view.js。此文件将包含您自定义的控制器和视图逻辑。
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, }; });代码解释：
- odoo.define(“MODULE_NAME.custom_form”, …): Odoo的模块定义机制，类似于amd，用于定义一个可被其他Odoo模块引用的JavaScript模块。
- require(…): 用于导入Odoo提供的核心组件，如 FormController、FormView 和 viewRegistry。
- FormController.extend({…}): 继承FormController，允许我们添加或覆盖其方法和属性。
- events: _.extend({}, FormController.prototype.events, {‘keyup input’: ‘_onInputKeyup’}): 这是关键部分。我们使用Underscore.js的_extend方法来合并父类FormController的所有默认事件，并添加我们自己的 ‘keyup input’ 事件，将其绑定到 _onInputKeyup 方法。’keyup input’ 表示当任何input元素上发生keyup事件时，都会调用_onInputKeyup。
- _onInputKeyup(ev): 这是我们的自定义事件处理函数，ev参数是标准的DOM事件对象。您可以在这里编写任何JavaScript逻辑。
- FormView.extend({…}): 继承FormView，并配置它使用我们自定义的CustomController。
- viewRegistry.add(‘custom_form’, CustomFormView): 将我们的CustomFormView注册到Odoo的视图注册表中，并赋予它一个唯一的字符串标识符 ‘custom_form’。
2. 配置Odoo资产（Assets）
为了让Odoo加载您的自定义JavaScript文件，您需要将其添加到模块的__manifest__.py文件中的assets配置项里。通常，自定义后端JavaScript文件会添加到web.assets_backend。
# 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, }添加后，请确保升级您的Odoo模块，以便Odoo重新加载资产。
3. 在XML视图中应用自定义类
最后一步是在您想要应用这些自定义行为的表单视图的XML定义中，使用js_class属性。
<!-- 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>在