Fork me on GitHub

AFrameJS

- Javascript MVC Library

class AFrame.DataContainer class extends AFrame.AObject

DataContainers are the basic atom of data within the AFrameJS ecosystem. Used like a hash. They provide functionality allowing concerned parties to be notified when the data mutates. They are the "Model" in Model-View-Controller. DataContainer's make it possible to have multiple Views bound to a particular field update automatically when the underlying data is modified.

Example:

var dataObject = {
    firstName: 'Shane',
    lastName: 'Tomlinson'
};

var dataContainer = AFrame.DataContainer.create( { data: dataObject } );
dataContainer.bindField( 'firstName', function( notification ) {
    alert( 'new name: ' + notification.value );
} );

dataContainer.set( 'firstName', 'Charlotte' );

Uses…

Known subclasses

Methods

Methods Returns Description
AFrame.DataContainer.create( data ) void ↑

Create a DataContainer.

 var dataContainer = AFrame.DataContainer.create( { data: dataObject } );

Parameters:

  • data <object || AFrame.DataContainer>

    (optional) If given, creates a new AFrame.DataContainer for the data. If already an AFrame.DataContainer, returns self, if the data already has an AFrame.DataContainer associated with it, then the original AFrame.DataContainer is used.
bindField( fieldName, callback, context ) id ↑

Bind a callback to a field. Function is called once on initialization as well as any time the field changes. When function is called, it is called with an event.

var onChange = function( event ) {
    console.log( 'Name: "' + event.fieldName + '" + value: "' 
       + event.value + '" oldValue: "' + event.oldValue + '"' );
};
var id = dataContainer.bindField( 'name', onChange );
// use id to unbind callback manually, otherwise callback will 
/ /be unbound automatically.

Parameters:

  • fieldName <string>

    name of field

  • callback <function>

    callback to call

  • context <object>

    context to call callback in

      • Returns:

      • <id>

        id that can be used to unbind the field
forEach( function, context ) void ↑

Iterate over each item in the dataContainer. Callback will be called with two parameters, the first the value, the second the key

dataCollection.forEach( function( item, index ) {
   // process item here
} );

Parameters:

  • function <function>

    to call

  • context <object>

    (optional) optional context
get( fieldName ) variant ↑

Get the value of a field

var value = dataContainer.get( 'name' );

Parameters:

  • fieldName <string>
    • name of the field to get

      • Returns:

      • <variant>

        value of field
init( ) void ↑

Initialize the data container.
set( fieldName, fieldValue ) variant ↑

Update a field.

// If passing two arguments, the first argument is
 // the name of the field, the second is the value
var prevVal = dataContainer.set( 'name', 'Shane Tomlinson' );

// If passing a single argument, it must be an
 // object with key/value pairs.  prevVals will
// be an object with the previous value of each
// field that is updated.
var prevVals = dataContainer.set( {
    name: 'Shane Tomlinson',
    employer: 'AFrame Foundary'
} );

Parameters:

  • fieldName <string>

    name of field

  • fieldValue <variant>

    value of field

      • Returns:

      • <variant>

        previous value of field
toJSON( ) object ↑

Get an object with all fields contained in the DataContainer.

// Get an object with all fields contained in the DataContainer.
var dataObject = dataContainer.toJSON();
unbindField( id ) void ↑

Unbind a field.

var id = dataContainer.bindField(...
dataContainer.unbindField( id );

Parameters:

  • id <id>

    given by bindField

Methods inherited from AFrame.ObservablesMixin

Methods Notes
bindEvent ↑
bindTo ↑
getEventObject ↑
isEventTriggered ↑
proxyEvents ↑
setEventData ↑
triggerEvent ↑
unbindAll ↑
unbindEvent ↑
unbindTo ↑
unbindToAll ↑

Methods inherited from AFrame.AObject

Methods Notes
addChild ↑
bindEvents ↑
checkRequired ↑
getCID ↑
getConfig ↑
init ↑
removeChild ↑
teardown ↑
triggerProxy ↑

Methods inherited from AFrame.EnumerableMixin

Methods Notes
filter ↑
getCount ↑
search ↑

Events

Events Description
onSet( event ) ↑

Triggered whenever any item on the object is set.

Parameters:

  • event <AFrame.Event>
    • an event object. @see Event
  • event.fieldName <string>
    • name of field affected.
  • event.value <variant>
    • the current value of the field.
  • event.oldValue <variant>
    • the previous value of the field (only applicable if data has changed).
onSet-fieldName( event ) ↑

Triggered whenever an item on the object is set. This is useful to bind to whenever a particular field is being changed.

Parameters:

  • event <AFrame.Event>
    • an event object. @see Event
  • event.fieldName <string>
    • name of field affected.
  • event.value <variant>
    • the current value of the field.
  • event.oldValue <variant>
    • the previous value of the field (only applicable if data has changed).

Events inherited from AFrame.AObject

Events Notes
onInit ↑
onTeardown ↑

Configuration Attributes

Attributes Type Description
data {object} ↑

Initial data

Default value: {}

Configuration Attributes inherited from AFrame.AObject

Attributes Notes
{cid} cid ↑