Aberdeen - v1.0.3
    Preparing search index...

    Function observe

    • Creates a reactive scope that automatically re-executes the provided function whenever any proxied data (created by proxy) read during its last execution changes, storing its return value in an observable.

      Updates are batched and run asynchronously shortly after the changes occur. Use clean to register cleanup logic for the scope. Use peek or unproxy within the function to read proxied data without subscribing to it.

      Type Parameters

      • T extends void | DatumType

      Parameters

      • func: () => T

        The function to execute reactively. Any DOM manipulations should typically be done using $ within this function. Its return value will be made available as an observable returned by the observe() function.

      Returns ValueRef<T>

      An observable object, with its value property containing whatever the last run of func returned.

      const data = proxy({ user: 'Frank', notifications: 42 });

      $('main', () => {
        console.log('Welcome');
        $('h3:Welcome, ' + data.user); // Reactive text

        observe(() => {
          // When data.notifications changes, only this inner scope reruns,
          // leaving the `<p>Welcome, ..</p>` untouched.
          console.log('Notifications');
          $('code.notification-badge:' + data.notifications);
          $('a:Notify!', {click: () => data.notifications++});
        });
      });

      Note that the above could just as easily be done using $(func) instead of observe(func).

      const counter = proxy(0);
      setInterval(() => counter.value++, 1000);
      const double = observe(() => counter.value * 2);

      $('h3', () => {
          $(`:counter=${counter.value} double=${double.value}`);
      })

    Settings

    Member Visibility