class AFrame.Display class extends AFrame.AObject

A base class for a display. Provides base target and DOM functionality. A Display is completely generic, but can be used as the View in the Model-View-Controller paradigm. See Field for Views that are tied to specific pieces of data.

<button id="submitForm">Submit</button>

---------

var buttonSelector = '#submitForm';

// buttonSelector is a selector used to specify the root node of
//    the target.
var button = AFrame.Display.create( {
    target: buttonSelector
} );

// When binding to a DOM event, must define the target, which
//    can be any element or selector. If a selector is given,
//    the target is looked for as a descendant of the display's
//    target.
button.bindClick( buttonSelector, function( event ) {
  // take care of the click, the event's default action is
  //     already prevented.
} );

// Any DOM event can be bound to.
button.bindDOMEvent( buttonSelector, 'mouseenter', function( event ) {
   // Do a button highlight or some other such thing.
} );

Using render to draw a display

By default, the AFrame assumes that a display's DOM is already drawn. If a display needs rendered, this can be done so using the render method. The below example is of a subclass overriding the render method. When using render, be sure to use the sc's render method.

 ...
 // Using the jQuery DOM adapter.

 // Example of render which directly inserts HTML
 render: function() {
     AFrame.DOM.setInner( this.getTarget(), '<div>This is rendered ' +
          'inside of the Dislay\'s target</div>' );
 },

 // Example of using jTemplate to render a template
 render: function() {
     this.getTarget().setTemplate( $( '#template' ).html() )
         .processTemplate( {} );
 },

Declaring DOM Event Bindings

Binding to a DOM event is a particularly common pattern in AFrame, so common that a shortcut way to declare these bindings is implemented. DOM Events are declared in the "domevents" array on the Class' prototype.

Example Usage:

// First is a simple click event with an inline handler.  The
  // click event is attached to the Display's target node.
var Display = AFrame.Display.extend( {
    domevents: {
        click: function( event ) {
                // Handle event here
        }
    }
} );

// Second, a mouseover event is attached to the Display's target.
// The handler is a class function, whose name is given as the
// event handler.  All strings are assumed to be class functions.
var Display = AFrame.Display.extend( {
    domevents: {
        mouseover: 'onMouseOver'
    },
    onMouseOver: function( event ) {
        // Handle Event
    }
} );

// Frequently, it is necessary to attach an event not to the target
  // element of the object, but to one of its children.  This is possible
  // by specifying a selector to attach to.
var Display = AFrame.Display.extend( {
    domevents: {
        'click .selector': function( event ) {}
    }
} );

// Since attaching multiple event handlers can help reduce
// event handler complexity, multiple handlers are possible.
// Instead of specifying one handler, specify an array of handlers.
var Display = AFrame.Display.extend( {
    domevents: {
        click: [ function( event ) {
        // Handle Event
        }, 'onClick' ],
    },
    onClick: function( event ) {
        // Handle Event
    }
} );

// All together now - Multiple events, using a combination
  // of inline and class handlers
var Display = AFrame.Display.extend( {
    domevents: {
        'click .selector': [ function( event ) {
            // Handle Event
        }, 'onClick' ],
        mouseover: 'onMouseOver',
    },
    onClick: function( event ) {
        // Handle Event
    },
    onMouseOver: function( event ) {
        // Handle Event
    }
} );

Known subclasses

Constructor

Constructor	Parameters	Returns
`AFrame.Display( )`

Methods

Methods	Returns	Description
`bindClick( target, callback, context )`	`id`	↑ a convenience function for binding click events. The event has it's default prevented so that if binding to an anchor with an href of "#", the screen does not jump. `var onClose = function( event ) { // event's default is already prevented // close something here }; var id = display.bindClick( '.btnClose', onClose ); // use id to unbind DOM event` Parameters: `target <element \|\| selector>` the target. If a string, searches the DOM `callback <function>` the callback to callback `context <object>` (optional)- the context to call the callback in, if not given, use this. Returns: `<id>` id that can be used to unbind the event.
`bindDOMEvent( target, eventName, callback, context )`	`id`	↑ Bind to a DOM event `var onClose = function( event ) { // close something here }; var id = display.bindDOMEvent( '.btnClose', 'click', onClose ); // use id to unbind DOM event` Parameters: `target <element \|\| selector>` the target. If a string, searches the DOM `eventName <string>` the name of the event to bind to `callback <function>` the callback to callback `context <object>` (optional)- the context to call the callback in, if not given, use this. Returns: `<id>` id that can be used to unbind the event.
`getDOMElement( )`	`HTMLElement`	↑ Get the display's native DOM Element. `var element = display.getDOMElement();` Returns: `<HTMLElement>` the DOM Element
`getTarget( )`	`element`	↑ Get the display's target. `var target = display.getTarget();` Returns: `<element>` target
`render( )`	`void`	↑ Render the HTML element, by default, only triggers the onRender observable. Should be overridden in subclasses to do any templating, setting up the DOM, etc. Subclasses do not need to do anything if the full DOM for this display has already been created. AFrame does not care what templating system that is used, so any way of setting the target's HTML is fine. `... // Example of render which directly inserts HTML render: function() { AFrame.DOM.setInner( this.getTarget(), '<div>This is rendered inside of ' + 'the Dislay\'s target</div>' ); }, // Example of using jTemplate to render a template render: function() { this.getTarget().setTemplate( $( '#template' ).html() ).processTemplate( {} ); },`
`unbindDOMEvent( id )`	`void`	↑ Unbind a DOM event `var id = display.bindDOMEvent( ... ); display.unbindDOMEvent( id );` Parameters: `id <id>` id of event to unbind

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`	↑
`getCID`	↑
`getConfig`	↑
`init`	↑
`removeChild`	↑
`teardown`	↑
`triggerProxy`	↑

Events

Events Description

Events	Description
`onRender( display )`	↑ Triggered whenever the displayed is rendered. Parameters: `display <Display>` the display being rendered.


                          onRender(
                          display
                          )

↑

Triggered whenever the displayed is rendered.

Parameters:

display <Display>
- the display being rendered.

Events inherited from AFrame.AObject

Events	Notes
`onInit`	↑
`onTeardown`	↑

Configuration Attributes

Attributes	Type	Description
`target`	`{element \|\| selector}`	↑ the target

Configuration Attributes inherited from AFrame.AObject

Attributes	Notes
`{cid} cid`	↑

AFrameJS

- Javascript MVC Library