Skip to content

Home

Jump to bottom
Jim Gourgoutis edited this page Nov 28, 2011 · 4 revisions

Key Concepts

HTML Markup

The Athena UI Framework allows HTML authors to describe behavior through markup. Athena uses two configurable data attributes to annotate the name of a control and its configuration. By default the attributes are set to data-athena and data-athena-config. data-athena is a space delimited list of controls. data-athena-config is a configuration object keyed by the name of the control.

<button id="play_button" data-athena="ui:Button ui:Foo" data-athena-config="{
  'ui:Button': {
       action: 'play'
   },
  'ui:Foo': {
       bar: 'baz'
   }
}">Play</button>

Dependency Management

Under the covers Athena scans the HTML, loads necessary JS files (via inject), and applies behavior.

Events

HTML Elements with applied behavior (Controls) communicate with their ancestors through Event Bubbling. Controls can observe events from other Controls, or notify Controls of events. Athena leverages a generic EventProvider that provides a direct map to jQuery's events. Because Athena leverages jQuery events, on, off, and trigger are available to all Athena controls. Events bubble. jQuery collections can observe events triggered on other jQuery collections. jQuery collections can notify other jQuery collections of events. Athena events can be name-spaced. Athena has a page level object that catches events as they bubble up to it.

Clone this wiki locally