Using client-side QWeb templates

Just as it’s a bad habit to programmatically create HTML code in JavaScript, you should only create minimal DOM elements in your client-side JavaScript code. Fortunately, there’s a templating engine available for the client side.

A client-side template engine is also available in Odoo. This template engine is known as Qweb Templates and is carried out completely in JavaScript code and rendered inside the browser.

Getting ready

For this recipe, we will be using the my_hostel module from the previous recipe and add informationPanel below the category color icon.

Using renderToElement, we render the category information element and set it on informationPanel.

How to do it...

We need to add the QWeb definition to the manifest and change the JavaScript code so that we can use it. Perform the following steps to get started:

1. Import @web/core/utils/render and extract the renderToElement reference to a variable, as shown...