Odoo15如何在QWeb模板中加载JS？按钮事件无法触发

一、修复manifest.py的语法错误 #

你的assets配置中，web.assets_backend与web.assets_frontend两个键之间缺少逗号，这会导致Python解析错误，直接让整个资源包配置失效。修正后代码如下：

'assets': {
    'web.assets_backend': [
        # 其他资源...
        'table_relation/static/src/js/log_data.js',
    ],
    'web.assets_frontend': [
        # 其他资源...
        'table_relation/static/src/js/log_data.js',
    ],
    # 其他资源包...
}

二、修复QWeb模板的资源调用问题 #

1. 修正拼写错误：模板中的t-call-asssets是错误写法，正确应为t-call-assets。
2. 移除t-js="false"属性：该属性会禁止加载资源包中的JS文件，直接导致log_data.js无法被引入。
3. 匹配页面类型选择资源包：你的控制器使用auth="user"，属于后端用户页面，应调用web.assets_backend而非web.assets_frontend。修正后的模板：

<odoo>
  <template id="log_data_template" name="Log Data">
    <t t-call="web.layout">
      <t t-set="head">
        <t t-call-assets="web.assets_common"/>
        <t t-call-assets="web.assets_backend"/>
      </t>

      <div id="wrap" class="container">
        <h1>Log Data</h1>
        <div class="o_log_data">
          <button id="start-log">日志</button>
          <button id="cancel-log">停止</button>
          <div id="log-content" style="height:500px;overflow: scroll;"/>
        </div>
        <button type="button" class="demo-btn">demo button</button>
      </div>
    </t>
  </template>
</odoo>

三、调整JS代码适配后端页面 #

publicWidget是为前端网站模块设计的组件，后端页面需使用Odoo后端的Widget体系。修改log_data.js如下：

odoo.define('log_data', function (require){
'use strict';
var Widget = require('web.Widget');
var core = require('web.core');

console.log('========== log_data.js 已加载 ==========')

var LogDataWidget = Widget.extend({
    selector: '.o_log_data',
    events: {
        'click #start-log': '_startLog',
        'click #cancel-log': '_cancelLog',
    },

    init: function (parent) {
        this._super(parent);
        console.log('LogDataWidget 初始化');
    },
    start: function () {
        console.log('LogDataWidget 启动');
        return this._super.apply(this, arguments);
    },
    _startLog: function () {
        console.log('_startLog 触发');
    },
    _cancelLog: function () {
        console.log('_cancelLog 触发');
    },
});

var DemoBtnWidget = Widget.extend({
    selector: '.demo-btn',
    events: {
        'click': '_onClick'
    },
    _onClick: function (e) {
        console.log('_onClick 触发');
    },
});

// 页面加载时自动挂载组件
$(document).ready(function() {
    if ($('.o_log_data').length) {
        new LogDataWidget(this).attachTo($('.o_log_data'));
    }
    if ($('.demo-btn').length) {
        new DemoBtnWidget(this).attachTo($('.demo-btn'));
    }
});
})

四、后续验证步骤 #

1. 执行odoo-bin -u table_relation升级模块，确保所有配置和代码变更生效。
2. 清除浏览器缓存（Ctrl+Shift+R），避免旧资源干扰测试。
3. 打开浏览器开发者工具（F12）的Console面板，查看是否有========== log_data.js 已加载 ==========输出，确认JS文件正常加载。

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