control

All controls in the AtomicJs library derive from the control object. This object provides the basic functionality required for any control to be adapted to the view elements from the view engine (i.e.: HTMLDOM).

Properties

parent -object

This property returns the control that this control is contained within. This is useful for accessing peer controls or navigating the view adapter tree.

Example:

var viewAdapterDefinition   =
{
    controls:
    {
        container:
        {
            controls:
            {
                child:
                {
                    onclick:
                    function()
                    {
                        var parent = this.parent; // <-- pointer to the parent `container` control
                    }
                }
            }
        }
    }
};

classes -object

This property contains the set of data bound class properties applied to the control. These class properties are mapped directly to the values that appear in the class attribute of an html element. The presence of these class values in the underlying view element are controlled by the binding expression yielding a true or false value.

Example:

var viewAdapterDefinition   =
{
    controls:
    {
        textField:
        {
            bind:
            {
                classes:
                {
                    myCustomClass:    "setCustomClass"
                }
            }
        }
    }
};
var model    = { setCustomClass: false };

attributes -object

This property contains the set of attribute properties applied to the control as a singular data bound property. These attribute properties are mapped directly to the set of custom data- prefixed attributes that appear in an html element.

Example:

var viewAdapterDefinition   =
{
    controls:
    {
        textField:
        {
            bind:
            {
                attributes:    "customAttributes"
            }
        }
    }
};
var model    =
{
    customAttributes:
    {
        firstCustomDataAttribute:   "firstValue",
        secondCustomDataAttribute:  "secondValue"
    }
};

/*
would emit into the following bound element
    <input  id="textField" 
            data-firstCustomDataAttribute="firstValue" 
            data-secondCustomDataAttribute="secondValue" />
*/

disabled -boolean

This data bound property indicates whether or not the view element is disabled or not based on the its current value, which may be bound to a property in an observed model.

Example:

var viewAdapterDefinition   =
{
    controls:
    {
        textField:
        {
            bind:
            {
                disabled:    "preventEditing"
            }
        }
    }
};
var model    =
{
    preventEditing:    true
};

display -boolean

This data bound property indicates whether or not the view element is visible or not based on the its current value, which may be bound to a property in an observed model.

Example:

var viewAdapterDefinition   =
{
    controls:
    {
        textField:
        {
            bind:
            {
                display:    "advancedMode"
            }
        }
    }
};
var model    =
{
    advancedMode:    true
};

enabled -boolean

This data bound property indicates whether or not the view element is enabled or not based on the its current value, which may be bound to a property in an observed model.

Example:

var viewAdapterDefinition   =
{
    controls:
    {
        textField:
        {
            bind:
            {
                enabled:    "allowEditing"
            }
        }
    }
};
var model    =
{
    allowEditing:    true
};

id -string

This data bound property specifies the id of the control and may be bound to a property in the observed model.

Example:

var viewAdapterDefinition   =
{
    controls:
    {
        textField:
        {
            bind:
            {
                id:    "mainEditorId"
            }
        }
    }
};
var model    =
{
    mainEditorId:    "mainTextField"
};

tooltip -string

This data bound property specifies the tooltip of the control and may be bound to a property in the observed model.

Example:

var viewAdapterDefinition   =
{
    controls:
    {
        textField:
        {
            bind:
            {
                tooltip:    "mainEditorTooltip"
            }
        }
    }
};
var model    =
{
    mainEditorTooltip:    "This field is where you can enter the main information regarding this thing."
};

value -any

This data bound property contains the value of the control and may be bound to a property in the observed model.

Example:

var viewAdapterDefinition   =
{
    controls:
    {
        textField:
        {
            bind:
            {
                value:    "mainInformation"
            }
        }
    }
};
var model    =
{
    mainInformation:    "Awaiting input from the user."
};

bind

data

height

isDataRoot

isRoot

root

updateon

width

Methods

addClass

bindClass

getEvents

hasClass

hasFocus

hide

insertBefore

insertAfter

removeClass

scrollIntoView

select

show

toggleClass

toggleEdit

toggleDisplay

triggerEvent

blur

click

focus

addClassFor

removeClassFor

showFor

hideFor

addEvent

addEvents

removeEvent

removeEvents

Events

Initializers