I have this JavaScript code (Owl):
odoo.define('victorikus_web.BuildYourCakeApp', function (require) {
'use strict';
const {Component, mount, whenReady, loadFile, useState} = require('@odoo/owl');
class BuildYourCakeApp extends Component {
static template = "victorikus_web.BuildYourCakeApp";
setup() {
console.log("BuildYourCakeApp, setup")
}
state = useState({step: 1, shape: 'square', size: '25cm', color: 'red'});
updateSize(event) {
console.log('updateSize');
this.state.size = event.target.value;
}
updateShape(event) {
console.log('updateShape');
this.state.shape = event.target.value;
}
updateColor(event) {
console.log('updateColor');
this.state.color = event.target.value;
}
resetCake() {
console.log('resetCake');
this.state.step = 1;
this.state.shape = 'square';
this.state.size = '25cm';
this.state.color = 'red';
}
}
whenReady(async function () {
const root = document.querySelector("#BuildYourCakeApp");
if (root) {
const templates = await loadFile(`victorikus_web/static/src/xml/BuildYourCakeApp.xml`);
const env = {
templates,
};
mount(BuildYourCakeApp, root, env);
}
});
});That links to this xml:
<?xml version="1.0" encoding="UTF-8" ?>
<odoo>
<data>
<template id="build_your_cake" name="Build Your Cake">
<t t-call="web.frontend_layout">
<div class="oe_structure">
<div id="wrap" class="container">
<div id="BuildYourCakeApp"></div>
</div>
</div>
</t>
</template>
</data>
</odoo>
And adds this xml with owl to the div with id "BuildYourCakeApp":
<?xml version="1.0" encoding="UTF-8" ?>
<templates>
<t t-name="victorikus_web.BuildYourCakeApp" owl="1">
<div class="container col-lg-12 mt-5">
<h1 class="text-center mb-4">Build Your Cake</h1>
<div class="card p-4 rounded">
<div class="row">
<div class="col-lg-6">
<div class="step-container">
<h2>Step: 1</h2>
<div class="form-group mt-4">
<b>
<label>Shape:</label>
</b>
<div class="form-check">
<input class="form-check-input" type="radio" name="shapeRadios" id="shapeSquare"
value="square" checked="checked" t-on-change="updateShape"/>
<label class="form-check-label" for="shapeSquare">
Square
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="shapeRadios" id="shapeRound"
value="round" t-on-change="updateShape"/>
<label class="form-check-label" for="shapeRound">
Round
</label>
</div>
</div>
<div class="form-group mt-4">
<b>
<label for="cakeSize">Size:</label>
</b>
<select class="form-control" id="cakeSize" t-on-change="updateSize">
<option value="">Select an option</option>
<option value="25cm">25 cm</option>
<option value="31cm">31 cm</option>
<option value="39cm">39 cm</option>
</select>
</div>
<div class="form-group mt-4">
<b>
<label>Color:</label>
</b>
<div class="form-check">
<input class="form-check-input" type="radio" name="colorRadios" id="colorRed"
value="red" checked="checked" t-on-change="updateColor"/>
<label class="form-check-label" for="colorRed">
Red
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="colorRadios" id="colorBlue"
value="blue" t-on-change="updateColor"/>
<label class="form-check-label" for="colorBlue">
Blue
</label>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="result-container mt-4 p-3">
A
<t t-esc="state.color"/>
<t t-esc="state.shape"/>
of
<t t-esc="state.size"/>
cake!
<button type="button" class="btn btn-primary mt-3" t-on-click="resetCake">Click Me!</button>
</div>
</div>
</div>
</div>
</div>
</t>
</templates>
Here is my mainfest file:
# -*- coding: utf-8 -*-
{
'name': "Victorikus Web",
'summary': """
Cake Shop Website.
""",
'description': """
Cake Shop Website.
""",
'author': "My Company",
'website': "https://www.yourcompany.com",
'license': 'Other proprietary',
# Categories can be used to filter modules in modules listing
# Check https://github.com/odoo/odoo/blob/16.0/odoo/addons/base/data/ir_module_category_data.xml
# for the full list
'category': 'Website',
'version': '1.0.0',
# any module necessary for this one to work correctly
'depends': ['base', 'web', 'website', 'website_sale', 'website_sale_stock', 'account', 'stock', 'contacts'],
'installable': True,
'application': True,
# always loaded
'data': [
'views/landing_page.xml',
'data/res.partner.csv',
'data/res.company.csv',
'data/res.lang.xml',
'data/website.xml',
'data/website.page.csv',
'data/product.template.csv',
'data/res.users.csv',
'data/res.groups.xml',
'data/website.page.sql',
'data/no_update.sql',
# Views
'views/build_your_cake_template.xml'
],
'assets': {
'web.assets_frontend': [
'victorikus_web/static/src/js/landing_page.js',
'victorikus_web/static/src/css/styles.css',
'victorikus_web/static/src/js/BuildYourCakeApp.js',
],
'web.assets_qweb': [
'victorikus_web/static/src/xml/BuildYourCakeApp.xml',
],
},
# only loaded in demonstration mode
'demo': [
],
}
But when modifying the xml with owl, it does not reflect the changes, not until I open a private page and then it shows the updated version.
When exploring the dev tools, I discovered that it loads the xml from cache.
Am I doing something wrong?
