Odoo 15中如何在<t t-name>模板内使用JavaScript库？

核心原因 #

通过qweb.render动态渲染的模板元素是在页面初始加载完成后才插入DOM的，而多数多选JS库只会在页面首次加载时初始化一次静态DOM元素，因此动态生成的<select>元素没有被库的初始化逻辑覆盖。

解决方案 #

1. 在模板渲染完成后手动触发初始化

找到你调用qweb.render的代码位置，在将渲染后的HTML插入DOM后，主动调用多选库的初始化方法：

// 渲染目标模板
const formHtml = qweb.render('t_lead_form');
// 将渲染结果插入到指定DOM容器
document.getElementById('target-container').innerHTML = formHtml;
// 初始化多选组件（替换为你使用的库的初始化方法，比如Select2就是$('.b_multiselection').select2()）
$('.b_multiselection').multiselect();

2. 在Odoo组件钩子中执行初始化

如果是基于Odoo Owl组件开发，可利用组件的生命周期钩子（如mounted、willUpdateProps）在DOM渲染完成后初始化：

import { Component } from '@odoo/owl';

export class LeadFormComponent extends Component {
    static template = 't_lead_form';

    mounted() {
        // 组件挂载完成后初始化多选库
        this._initMultiselect();
    }

    willUpdateProps() {
        // 组件属性更新、DOM重新渲染后再次初始化
        this._initMultiselect();
    }

    _initMultiselect() {
        // 用setTimeout确保DOM已完全渲染
        setTimeout(() => {
            // 避免重复初始化，先销毁再重建（根据库的API调整）
            $('.b_multiselection').multiselect('destroy').multiselect();
        }, 0);
    }
}

3. 额外注意事项

• 确认你的多选库支持动态元素初始化，部分库提供了事件监听或自动检测的配置，可优先查看库的官方文档。
• 确保web.assets_frontend中引入的JS/CSS文件加载顺序正确，库的JS文件要在你的自定义初始化代码之前加载。

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