Components In-Depth

As stated before, components are the basic building blocks of any Obvia app. Therefore, the purpose of this section is to provide a more in-depth overview of how to work with components.

Component Properties

A component inherits the properties:

  • $el is the actual jQuery object representing the wrapped DOM Node
  • id, guid, domID, visible, enabled, classes, attr, css, ownerDocument, appendTo, bindingDefaultContext, draggable, literal, props, attached
  • If id is not set, the default will be: “Text_1” where Text is the ctor and 1 is the global instance count.

Component Lifecycle

A component goes through the following lifecycle:

  • Init
  • RenderPromise (called directly or indirectly from the parent)
  • beginDraw -> endDraw (bindings are applied) -> Component is attached to the DOM -> beforeAttach -> Component attachment to the DOM finished -> afterAttach

Component Inherited Methods

These are the component inherited methods:

  • on, off, trigger
  • show, hide, blur, scrollTo, destruct, find(childId)
  • getBindingExpression, setBindingExpression, resetBindings, refreshBindings
  • renderPromise

Component Default Events

These are the component default events:

  • mousedown, mouseover, mouseout, mouseup, click, dblclick, blur, keydown, keyup, creationComplete, change, drop, dragover, dragstart, dragend, dragenter, dragleave, idChanged, DOMMutation, afterAttach, beforeAttach, init, beginDraw, endDraw
  • You may register events by specifying the event name as a property, with a callback as a value, or by using on().
  • In a custom component we declare custom events by using the data-triggers attribute and calling trigger from within the custom component.

Component State

In an application, state refers to the interface between data in the backend or local change and the representation of this data with UI elements in the frontend. State is able to keep the data of different components in sync because each state update will re-render all relevant components.

Props vs. state
Both are plain JavaScript objects which hold information that influences the output of the render, but they differ in one important aspect: props get passed to the component (similar to function parameters), whereas state is managed within the component.

A component, such as Form or App, can be comprised of other components.

Main Concepts
Components