自定义小部件 js 无法识别来自 qweb 的模板

Question

我尝试从 js reference 测试自定义小部件，但在调试器中出现错误：

Error: QWeb2: Template 'some.template' not found

qweb.xml 已在清单中正确设置，因为当我扩展 ListController 并使用另一个模板时，它可以正常工作。

这是我在 qweb.xml:

中使用的模板定义

<?xml version="1.0" encoding="UTF-8"?>
<template>
    <div t-name="some.template">
        <span class="val"><t t-esc="widget.count"/></span>
        <button>Increment</button>
    </div>
</template>

我尝试更改 <template> -> <templates>，完全删除标签 "template" 但仍然收到相同的错误消息。

JS：

odoo.define('working.test', function (require) {
var Widget = require('web.Widget');
var Counter = Widget.extend({
    template: 'some.template',
    events: {
        'click button': '_onClick',
    },
    init: function (parent, value) {
        this._super(parent);
        this.count = value;
    },
    _onClick: function () {
        this.count++;
        this.$('.val').text(this.count);
    },
});

// Create the instance
var counter = new Counter(this, 4);
// Render and insert into DOM
counter.appendTo(".o_nocontent_help");

})

清单：

# -*- coding: utf-8 -*-
{
    'name': "testwidget",

    'summary': """
        Short (1 phrase/line) summary of the module's purpose, used as
        subtitle on modules listing or apps.openerp.com""",

    'description': """
        Long description of module's purpose
    """,

    'author': "My Company",
    'website': "http://www.yourcompany.com",

    # Categories can be used to filter modules in modules listing
    # Check https://github.com/odoo/odoo/blob/12.0/odoo/addons/base/data/ir_module_category_data.xml
    # for the full list
    'category': 'Uncategorized',
    'version': '0.1',

    # any module necessary for this one to work correctly
    'depends': ['base'],
    'qweb': ['static/qweb.xml'],

    # always loaded
    'data': [
        # 'security/ir.model.access.csv',
        'views/views.xml',
        'views/web_asset.xml',
    ],
    # only loaded in demonstration mode
    'demo': [
        'demo/demo.xml',
    ],
}

知道我需要如何修改此模板才能使小部件正常工作，并且 db odoo 中的 table 存储这些模板吗？

Answer 1

我想您可能需要确保 js 定义正确引用模块名称

odoo.define('MODULE TECHNICAL NAME SHOULD BE HERE.test', function (require) {});

你还应该注册你的 js 函数，例如：

core.action_registry.add("module_name.name", Widget_Extend);

了解更多信息https://www.odoo.com/documentation/11.0/reference/javascript_reference.html#registries

Answer 2

您可以尝试更改

'qweb': ['static/qweb.xml'],

到

'qweb': ['static/*.xml'],

我有时会遇到这种情况，通过指定静态 xml 文件名，它不会呈现该模板。但是通过使用 * 加载所有 .xml 文件，模板被加载。

Answer 3

我运行遇到了同样的问题，需要将我的 QWeb 代码放入 static/src/xml/base.xml 以便 Odoo 识别它。

您可以通过在您的 Odoo 实例上转到此 URL 来检查 Odoo 是否正在加载 QWeb：

<odoo_instance>/web/webclient/qweb?mods=<my_module_name>

如：

localhost:8069/web/webclient/qweb?mods=test

为了比较，您可以看到使用 mods=web 加载 web 模块的 QWeb 资产的成功输出。

Answer 4

为了解决这个问题，我使用了解决方法 Widget.xmlDependencies:

 xmlDependencies: ['/test/static/qweb.xml']

但我认为主要原因是 PyCharm 中的缓存，我没有使它失效。

Answer 5

在阅读了一些代码之后，IMO，我意识到官方文档可能没有明确指出如何在前端使用模板。

总结一下我的理解：

清单中的'qweb'字段主要是为webclient（即backoffice）设计的，而不是网站。进入webclient时，请求/web/webclient/qweb获取所有已安装模块的模板。

为了在网站（即前端）中使用模板，同步和异步两种方式都存在。

同步方式：使用qweb.add_template。当参数为模板内容本身或DOM节点时，模板以同步方式加载。（虽然参数是 URL，然后它会向服务器发出 ajax 请求以获取内容。）

qweb.add_template在https://www.odoo.com/documentation/13.0/reference/qweb.html
中提到
异步方式：
1. 使用 ajax.loadXML，您可以在任何地方使用它来从 URL.
2. 使用您在小部件定义中指定的 xmlDependencies。如果你深入研究 widget.js 中的代码，你会发现 ajax.loadXML 正在 willStart.

有关于 qweb.add_template 与 ajax.loadXML 的讨论参见 https://github.com/OCA/pylint-odoo/issues/186 and https://github.com/odoo/odoo/issues/20821

仅供参考。

Answer 6

        In Odoo 14 make sure
        dashboard.js
        odoo.define('library_managment.dashboard', function(require) {
            "use strict";
        
            // alert("hello odoo...............")
             console.log("Hello My Module........!!")
        
            var widgetRegistry = require('web.widget_registry');
            var Widget = require('web.Widget');
        
            var Counter = Widget.extend({
            template: 'library_managment.template',
            xmlDependencies: ['/library_managment/static/src/xml/template.xml'],
            events: {
                'click button': '_onClick',
            },
            init: function (parent, value) {
        
                this._super(parent);
                this.count = 4*9+5;
                 console.log("parent is", parent)
                 console.log("counter is..", this.count)
            },
            _onClick: function () {
                this.count++;
                this.$('.val').text(this.count);
            },
        
        });
        
            widgetRegistry.add('library_counter', Counter);
            return Counter;
        
        
        });
    
    template.xml
    add this 
    <?xml version="1.0" encoding="UTF-8"?>
    
    <odoo>
        <div t-name="library_managment.template">
            <span class="val">
                <t t-esc="widget.count"/>
            </span>
            <button class="bg-danger">Increment</button>
        </div>
    </odoo>


then add js file in assets.xml inside youe views
<odoo>
 <template id="assets_backend" name="Library assets" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/library_managment/static/src/js/dashboard.js"></script>
            </xpath>
        </template>
</odoo>

然后像这样在清单中添加： 'js': ['/static/src/js/dashboard.js'], 'qweb': ['/static/src/xml/template.xml']

然后在表单视图中添加这一行

自定义小部件 js 无法识别来自 qweb 的模板

Custom widget js doesn't recognize template from qweb

odoo

odoo-12