owl icon indicating copy to clipboard operation
owl copied to clipboard

t-component with t-att-class and shouldUpdate false

Open aab-odoo opened this issue 4 years ago • 0 comments

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;
}

aab-odoo avatar Feb 25 '21 12:02 aab-odoo