Odoo15中如何用JavaScript渲染id为dashboard_example的QWeb模板？

核心原因 #

Odoo15的QWeb并非全局变量，不能直接通过Qweb调用，必须通过Odoo的模块依赖注入或组件服务获取实例。

实现步骤及配置 #

1. 模块基础配置（manifest.py） #

确保JS文件和XML模板被Odoo正确加载：

{
    'name': 'Your Module Name',
    'version': '1.0',
    'depends': ['web'],  # 必须依赖web模块
    'data': [
        'views/dashboard_templates.xml',  # 包含dashboard_example模板的XML文件路径
    ],
    'assets': {
        'web.assets_backend': [
            'your_module_name/static/src/js/dashboard.js',  # 你的JS文件路径
        ],
    },
}

2. 编写QWeb模板（dashboard_templates.xml） #

确保模板id为dashboard_example：

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="dashboard_example">
        <div class="dashboard-card">
            <h2>Dashboard Example</h2>
            <p>当前数据：<t t-esc="display_data"/></p>
        </div>
    </template>
</odoo>

3. JS中渲染模板的三种方式 #

方式一：使用Odoo Component组件（推荐，Odoo15+标准）

通过useService注入qweb服务：

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

    const { Component, useService } = require('web.core');

    const DashboardComponent = Component.extend({
        setup() {
            // 获取qweb服务实例
            this.qweb = useService('qweb');
        },
        // 自定义渲染方法
        renderDashboard() {
            // 渲染模板，传入上下文数据
            const templateHtml = this.qweb.render('dashboard_example', {
                display_data: '测试数据'
            });
            // 将渲染结果插入目标DOM元素
            document.querySelector('#target_container').innerHTML = templateHtml;
        },
    });

    return DashboardComponent;
});

方式二：使用传统Widget

Widget会自动继承qweb实例，直接通过this.qweb调用：

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

    const Widget = require('web.Widget');

    const DashboardWidget = Widget.extend({
        start: function () {
            const templateHtml = this.qweb.render('dashboard_example', {
                display_data: 'Widget测试数据'
            });
            // 将结果插入Widget自身的DOM元素
            this.$el.html(templateHtml);
            return this._super.apply(this, arguments);
        },
    });

    return DashboardWidget;
});

方式三：独立JS脚本（非组件/Widget场景）

手动引入web.qweb模块获取实例：

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

    // 直接引入qweb模块
    const qweb = require('web.qweb');

    function renderTemplate() {
        const html = qweb.render('dashboard_example', {
            display_data: '独立脚本数据'
        });
        // 处理渲染后的HTML
        document.getElementById('dashboard_area').innerHTML = html;
    }

    // 暴露方法供外部调用
    return { renderTemplate: renderTemplate };
});

注意事项 #

• 必须确保模板文件已被Odoo加载，否则会提示模板不存在。
• 上下文数据要与模板中的变量对应，避免渲染错误。

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