owl
owl copied to clipboard
t-component with t-att-class and shouldUpdate false
In the following scenario, the class isn't re-evaluated when app is re-rendered, because the sub component is "should update : false"
const { Component, mount } = owl;
class Greeter extends Component {
shouldUpdate() {
return false;
}
}
// Main root component
class App extends Component {
flagA = 'blue';
switch() {
this.flagA = this.flagA === 'red' ? 'blue' : 'red';
this.render();
}
}
App.components = { Greeter };
// Application setup
mount(App, { target: document.body });
<templates>
<div t-name="Greeter" class="greeter">Hello</div>
<div t-name="App">
<button t-on-click="switch">Click Me</button>
<t t-esc="flagA"/>
<Greeter t-att-class="{a: flagA === 'red'}"/>
</div>
</templates>
.a {
color: red;
}