axf

---

ax() - The Ax Function

====

Ax is a javaScript library for creating dynamic web content.

Ax is invoked by calling its nominal function:

ax( component, attributes )

The component is parsed by ax() to create content for an HTML element.

component can be:

• function - that returns a component when called.
• element, node - used as is.
• array, nodelist - collection of components.
• object - rendered as pretty JSON.
• null - render nothing,
• string, anything else - rendered as text.

Optional attributes are applied to the element. For example, you can define an attribute class: 'btn' and the element will have an attribute of class="btn".

The attributes Ax attributes can be Object properties ( all are optional ):

• $tag {string} nodename for the element.
• $state {(object|literal)} data used in rendering content
• $text {(string|function)} plain text content for the element.
• $html {(string|function)} html content for the element.
• $nodes {(array|function)} collection of components for the element.
• $init {function} called once the element is rendered
• $update {function} called when $state changes
• $on {object} event handlers for the element
• $render method property, which populates an element with content.
• Any other property {user defined} define whatever else you like, although $render and $off should not normally be used.

The element is furnished with Ax properties for content rendering, state management, event handling and data binding.

Object properties ( all are optional ):

• $tag {string} nodename for the element.
• $state {(object|literal)} data used in rendering content
• $text {(string|function)} plain text content for the element.
• $html {(string|function)} html content for the element.
• $nodes {(array|function)} collection of components for the element.
• $init {function} called once the element is rendered
• $update {function} called when $state changes
• $on {object} event handlers for the element
• $render method property, which populates an element with content.
• Any other property {user defined} define whatever else you like, although $render and $off should not normally be used.

The $update function is called when the $state property changes. Use $update to manage data bindings and trigger state-dependent behaviour. If $update is not specified, the content will be refreshed by reapplying the relevant object content property. If $update is specified, the content will be automatically refreshed only if $update() returns true.

$text, $html and $nodes are the content properties, which describe the content ( i.e. children ) to be rendered on the element. You can't define more than one of these, although you can change from one type to another dynamically Content properties may be functions that return content.

The object properties $text, $html, $nodes and $state are not applied directly to the element. Instead, the element has these properties defined with custom accessors ( i.e. get/set ) that do the job of triggering the element $render method. This is so that you can write statements like either:

this.$state = { name: 'Fred', age: 30 }
this.$text = 'New text'

and the element will render the new content.

Elements also have custom accessors for $on, which allows you to write this.$on( { click: alert(foo) } ) to set an event listener.

ax() is global and has properties:

• 'factory' - makes HTML elements
• 'tags' - interprets ax() tags like a.h1(Hi)
• 'extension' - for adding features to ax()
• 'a' - exposes tags
• 'x' - exposes extension