Using client-side QWeb templates

Just as it's a bad habit to programmatically create HTML code in JavaScript, you should only create the minimum amount of DOM elements in your client-side JavaScript code. Fortunately, there's a templating engine available for the client side, too, and even more fortunately, the client-side templating engine has the same syntax as the server-side templates.

Getting ready

For this recipe, we will be using the my_library module from the previous recipe. We will make this more modular by moving the DOM element creation to QWeb.

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 and extract the qweb reference to a variable, as shown in the following code:

   odoo.define('my_field_widget', function (require) {
   "use strict";
   var AbstractField = require('web.AbstractField'...