Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface Projector

A projector is used to create the real DOM from the the virtual DOM and to keep it up-to-date afterwards.

You can call append, merge, insertBefore and replace to add the virtual DOM to the real DOM. The renderMaquetteFunction callbacks will be called to create the real DOM immediately. Afterwards, the renderMaquetteFunction callbacks will be called again to update the DOM on the next animation-frame after:

  • The Projector's scheduleRender function was called
  • An event handler (like onclick) on a rendered VNode was called.

The projector stops when stop is called or when an error is thrown during rendering. It is possible to use window.onerror to handle these errors. Instances of Projector can be created using createProjector.

Hierarchy

  • Projector

Index

Methods

append

  • append(parentNode: Element, renderMaquetteFunction: function): void
  • Appends a new childnode to the DOM using the result from the provided renderMaquetteFunction. The renderMaquetteFunction will be invoked again to update the DOM when needed.

    Parameters

    • parentNode: Element

      The parent node for the new childNode.

    • renderMaquetteFunction: function

      Function with zero arguments that returns a VNode tree.

    Returns void

detach

  • detach(renderMaquetteFunction: function): Projection

insertBefore

  • insertBefore(beforeNode: Element, renderMaquetteFunction: function): void
  • Inserts a new DOM node using the result from the provided renderMaquetteFunction. The renderMaquetteFunction will be invoked again to update the DOM when needed.

    Parameters

    • beforeNode: Element

      The node that the DOM Node is inserted before.

    • renderMaquetteFunction: function

      Function with zero arguments that returns a VNode tree.

    Returns void

merge

  • merge(domNode: Element, renderMaquetteFunction: function): void
  • Merges a new DOM node using the result from the provided renderMaquetteFunction with an existing DOM Node. This means that the virtual DOM and real DOM have one overlapping element. Therefore the selector for the root VNode will be ignored, but its properties and children will be applied to the Element provided The renderMaquetteFunction will be invoked again to update the DOM when needed.

    Parameters

    • domNode: Element

      The existing element to adopt as the root of the new virtual DOM. Existing attributes and childnodes are preserved.

    • renderMaquetteFunction: function

      Function with zero arguments that returns a VNode tree.

    Returns void

renderNow

  • renderNow(): void
  • Synchronously re-renders to the DOM. You should normally call the scheduleRender() function to keep the user interface more performant. There is however one good reason to call renderNow(), when you want to put the focus into a newly created element in iOS. This is only allowed when triggered by a user-event, not during requestAnimationFrame.

    Returns void

replace

  • replace(domNode: Element, renderMaquetteFunction: function): void
  • Replaces an existing DOM node with the result from the provided renderMaquetteFunction. The renderMaquetteFunction will be invoked again to update the DOM when needed.

    Parameters

    • domNode: Element

      The DOM node to replace.

    • renderMaquetteFunction: function

      Function with zero arguments that returns a VNode tree.

    Returns void

resume

  • resume(): void
  • Resumes the projector. Use this method to resume rendering after stop was called or an error occurred during rendering.

    Returns void

scheduleRender

  • scheduleRender(): void
  • Instructs the projector to re-render to the DOM at the next animation-frame using the registered renderMaquette functions. This method is automatically called for you when event-handlers that are registered in the VNodes are invoked.

    You need to call this method when timeouts expire, when AJAX responses arrive or other asynchronous actions happen.

    Returns void

stop

  • stop(): void
  • Stops the projector. This means that the registered renderMaquette functions will not be called anymore.

    Note that calling stop is not mandatory. A projector is a passive object that will get garbage collected as usual if it is no longer in scope.

    Returns void

Generated using TypeDoc