• An example utilty that uses resource

    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"

    <input value={{this.id}} {{on 'input' this.updateId}}>

    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


    • context: object

      destroyable parent, e.g.: component instance aka "this"

    • fn: (() => Return)

      the function to run with the return value available on .value

        • (): Return
        • Returns Return

    Returns State<Return>

Generated using TypeDoc