@glimmer/tracking

Variables

• tracked

Functions

• setPropertyDidChange()

variable tracked

let tracked: PropertyDecorator;

• Example 1

  import Component from '@glimmer/component';
  import { tracked } from '@glimmer/tracking';
  
  export default class MyComponent extends Component {
     @tracked
     remainingApples = 10
  }

  When something changes the component's remainingApples property, the rerender will be scheduled.

  Example 2

  Computed Properties

  In the case that you have a getter that depends on other properties, tracked properties accessed within the getter will automatically be tracked for you. That means when any of those dependent tracked properties is changed, a rerender of the component will be scheduled.

  In the following example we have two properties, eatenApples, and remainingApples.

  import Component from '@glimmer/component';
  import { tracked } from '@glimmer/tracking';
  
  const totalApples = 100;
  
  export default class MyComponent extends Component {
     @tracked
     eatenApples = 0
  
     get remainingApples() {
       return totalApples - this.eatenApples;
     }
  
     increment() {
       this.eatenApples = this.eatenApples + 1;
     }
   }

function setPropertyDidChange

setPropertyDidChange: (cb: () => void) => void;