Objective

This recipe demonstrates how a widget can force itself to re-render when its internal state changes.

Code example

This code example does the following:

  1. Defines a HelloWorld widget
  2. Invokes the method this.invalidate() within a interval
class HelloWorld extends WidgetBase {
    constructor() {
        super();
        this.count = 0;

        setInterval(() => {
            this.count++;
            this.invalidate();
        }, 1000);
    }

    render() {
        return v('div', [ `Count: ${this.count}`]);
    }
}

All Dojo 2 widgets extend from WidgetBase and inherit an invalidate method.

When a widget is invalidated, its render() method is invoked.

Additional resources