如何在 Odoo 视图模板中使用 t-component 渲染 OWL 组件？

Question

我正在尝试在视图模板中使用 t-component 在 Odoo 中渲染 OWL 组件。但是，该组件未加载，页面上也没有显示任何内容。

这是我所做的：

1.我的OWL组件：

/** @odoo-module **/

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

export class ProductImageGallery extends Component {
    setup() {
        console.log("ProductImageGallery component is working");
    }
}
ProductImageGallery.template = "multi_image_master.ProductImageGalleryTemplate";

2.我的组件模板：

<template id="ProductImageGalleryTemplate" name="Product Image Gallery">
    <div>
        <h3>Product Image Gallery</h3>
        <p>Gallery of images for this product will appear here.</p>
    </div>
</template>

视图/xml 文件

这应该使用 t-component 渲染组件：

<template id="ProductPageTemplate" name="Product Page">
    <t t-call="website.layout">
        <div id="product-page-content" class="container">
            <t t-component="multi_image_master.ProductImageGallery"/>
            <p>Hello Bharathi</p>
        </div>
    </t>
</template>

控制器： 页面通过此控制器加载。

from odoo import http
from odoo.http import request

class ControllerProductPage(http.Controller):
    @http.route('/shop', type='http', auth='public', website=True, csrf=False)
    def renderProductPage(self, **kwargs):
        return request.render('multi_image_master.ProductPageTemplate', {})

清单文件

   {
    "name": "Product Multi-Image Manager",
    "version": "0.1",
    "category": "Product",
    "depends": ["website"],
    "data": [
        "views/product_template.xml"
    ],
    "assets": {
        "web.assets_backend": [
            "multi_image_master/static/src/js/product_image_gallery.js",
            "multi_image_master/static/src/xml/product_image_gallery.xml"
        ]
    },
    "installable": True,
    "application": True,
    "license": "LGPL-3"
}

问题： 当我加载 /shop 路由时，页面呈现静态内容，但不呈现组件 (t-component="multi_image_master.ProductImageGallery")。另外，组件的setup方法中的console.log()没有执行，说明组件没有被加载。

问题： 如何在 Odoo 视图模板中使用 t-component 正确渲染 OWL 组件？我在设置或注册中遗漏了什么吗？任何指导将不胜感激。

Answer 1

您似乎混淆了 Odoo 中的服务器端渲染和客户端渲染的概念。以下是它们的区别以及为什么您使用

t-component

和 OWL 的方法在这种情况下可能不起作用：

服务器端渲染：在 Odoo 控制器中使用

request.render

渲染的模板在服务器上进行处理并以纯 HTML 形式发送到浏览器。在这种情况下，使用

t-call

包含子模板是正确的方法。

---

解决方案：

1. 定义您的模板：

   <template id="ProductPageTemplate" name="Product Page">
       <t t-call="website.layout">
           <div id="product-page-content" class="container">
               <!-- Call your sub-template here -->
               <t t-call="multi_image_master.ProductImageGalleryTemplate"/>
               <p>Hello Bharathi</p>
           </div>
       </t>
   </template>
   

2. 定义您的控制器：

   from odoo import http
   from odoo.http import request
   
   class ControllerProductPage(http.Controller):
       @http.route('/shop', type='http', auth='public', website=True, csrf=False)
       def renderProductPage(self, **kwargs):
           # Render the main template
           return request.render('multi_image_master.ProductPageTemplate', {})
   

3. 更新您的清单文件： 确保这两个模板均列在模块清单文件 (

   data

   ) 的

   __manifest__.py

   部分下：

   {
       "name": "Multi Image Master",
       "data": [
           "views/product_template.xml"  # Add your template file here
       ],
   }
   

---

• 使用

  t-call

  作为子模板：

  t-call

  是在服务器端渲染中在主模板中包含另一个模板的正确方法。

• 避免静态模板使用 OWL：OWL 是交互式客户端组件的理想选择。对于静态页面来说，没有必要，而且更复杂。

---