如何在Odoo中从模板类触发JS函数（点击editPatientProfile触发）

方法一：利用js_class绑定JS组件（推荐） #

你已经给header设置了js_class="banner_summary_route"，可以基于这个组件添加点击事件监听：

1. 编写JS组件文件
   在模块的static/src/js目录下创建banner_summary.js，内容如下：

odoo.define('your_module_name.banner_summary', function (require) {
    "use strict";

    const publicWidget = require('web.public.widget');

    publicWidget.registry.banner_summary_route = publicWidget.Widget.extend({
        selector: '.banner_summary_route',
        events: {
            'click .editPatientProfile': '_onEditPatientProfileClick',
        },

        _onEditPatientProfileClick: function (ev) {
            ev.preventDefault(); // 阻止a标签默认跳转行为
            // 获取当前患者ID（需配合模板修改）
            const patientId = this.$el.data('patient-id');
            console.log('触发编辑操作，患者ID:', patientId);
            
            // 示例：调用Odoo后台方法
            this._rpc({
                model: 'medical.patient', // 替换为你的患者模型
                method: 'action_edit_profile',
                args: [patientId],
            }).then(function (result) {
                // 处理返回结果，比如打开编辑弹窗、刷新页面等
                console.log('编辑操作结果:', result);
            });
        },
    });

    return {};
});

2. 修改XML模板添加患者ID标识
   给header标签添加data-patient-id属性，方便JS获取当前患者：

<template id="patient_summery" name="patient_id.summery">
    <header class="site-header" js_class="banner_summary_route" t-att-data-patient-id="patient_id.id">
        <div class="site-identity">
            <h1><t t-esc="patient_id.name" />
                <a href="#" class="editPatientProfile">
                    <i class="fa fa-pencil-square-o"
                       style="font-size:24px;color: white;"></i>
                </a>
            </h1>
        </div>
    </header>
</template>

3. 加载JS文件
   在模块的views/assets.xml中注册该JS文件，确保Odoo能加载：

<odoo>
    <data>
        <template id="assets_frontend" inherit_id="web.assets_frontend">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/your_module_name/static/src/js/banner_summary.js"></script>
            </xpath>
        </template>
    </data>
</odoo>

方法二：直接在XML中使用t-on-click指令 #

如果逻辑简单，可直接给a标签绑定点击事件：

<template id="patient_summery" name="patient_id.summery">
    <header class="site-header" js_class="banner_summary_route">
        <div class="site-identity">
            <h1><t t-esc="patient_id.name" />
                <a href="#" t-on-click="_onEditPatientProfileClick" class="editPatientProfile">
                    <i class="fa fa-pencil-square-o"
                       style="font-size:24px;color: white;"></i>
                </a>
            </h1>
        </div>
    </header>
</template>

然后在方法一的JS组件中保留_onEditPatientProfileClick方法即可。

注意事项 #

• 替换your_module_name为你的实际模块名称
• 替换medical.patient为你的患者模型名称
• 必须阻止a标签默认跳转行为，避免页面跳转到锚点#
• 若在后台界面使用，需将web.public.widget替换为web.Widget

内容的提问来源于stack exchange，提问作者Tangent Technologies