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.
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.
A component goes through the following lifecycle:
- 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
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.
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
A component, such as Form or App, can be comprised of other components.