Module util/function

trackedFunction

• trackedFunction<Return>(...passed: Vanilla<Return>): State<Return>
• trackedFunction<Return>(...passed: WithInitialValue<Return>): State<Return>

• For use in the body of a class. Constructs a cached Resource that will reactively respond to tracked data changes

  Any tracked data accessed in a tracked function before an await will "entangle" with the function -- we can call these accessed tracked properties, the "tracked prelude". If any properties within the tracked payload change, the function will re-run.

  import Component from '@glimmer/component';
  import { tracked } from '@glimmer/tracking';
  import { trackedFunction }  from 'ember-resources/util/function';
  
  class Demo extends Component {
    @tracked id = 1;
  
    request = trackedFunction(this, async () => {
      let response = await fetch(`https://swapi.dev/api/people/${this.id}`);
      let data = await response.json();
  
      return data; // { name: 'Luke Skywalker', ... }
    });
  
    updateId = (event) => this.id = event.target.value;
  
    // Renders "Luke Skywalker"
    <template>
      {{this.request.value.name}}
  
      <input value={{this.id}} {{on 'input' this.updateId}}>
    </template>
  }
  

  Note, this example uses the proposed <template> syntax from the First-Class Component Templates RFC

  Also note that after an await, the this context should not be accessed as it could lead to destruction/timing issues.

  Type parameters

  • Return

  Parameters

  • Rest ...passed: Vanilla<Return>

  Returns State<Return>

• For use in the body of a class. Constructs a cached Resource that will reactively respond to tracked data changes

  Any tracked data accessed in a tracked function before an await will "entangle" with the function -- we can call these accessed tracked properties, the "tracked prelude". If any properties within the tracked payload change, the function will re-run.

  import Component from '@glimmer/component';
  import { tracked } from '@glimmer/tracking';
  import { trackedFunction }  from 'ember-resources/util/function';
  
  class Demo extends Component {
    @tracked id = 1;
  
    request = trackedFunction(this, async () => {
      let response = await fetch(`https://swapi.dev/api/people/${this.id}`);
      let data = await response.json();
  
      return data; // { name: 'Luke Skywalker', ... }
    });
  
    updateId = (event) => this.id = event.target.value;
  
    // Renders "Luke Skywalker"
    <template>
      {{this.request.value.name}}
  
      <input value={{this.id}} {{on 'input' this.updateId}}>
    </template>
  }
  

  Note, this example uses the proposed <template> syntax from the First-Class Component Templates RFC

  Also note that after an await, the this context should not be accessed as it could lead to destruction/timing issues.

  Type parameters

  • Return

  Parameters

  • Rest ...passed: WithInitialValue<Return>

  Returns State<Return>