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 Creating custom widgets recipe more modular by moving the DOM element creation to QWeb.

Getting ready

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

How to do it...

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

1. Add a member called template:

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

2. Change the _render function to simply render the element (inherited from Widget):

_render: function() 
   { 
       this.renderElement...