Using client-side QWeb templates

Just as it's a bad pattern to programmatically create HTML code in controllers, you should create only 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, it's just the same as for server side code.

We'll use Qweb to make the module from the previous recipe, Create custom widgets, more modular by moving the DOM element creation to QWeb.

Getting ready

This recipe is just a modified version of the previous recipe, Create custom widgets, code, so grab a copy of it and use it to create the module ch15_r02.

How to do it...

We add the QWeb definition in the manifest and change the JavaScript code to use it:

1. Remove the entire function start from your JavaScript code in static/src/js/ch15_r02.js, but add a member called template:

       var FieldMany2OneButtons = form_common.AbstractField.extend({
           template: 'FieldMany2OneButtons...