HexagonJS
Edit Page
Component
Helper methods for retrieving a components backing object.
Description
This makes debugging easier, and also means that you don't have to always hold component objects in your javascript - they are bound to the element they are initialised on.
When debugging in chrome or firefox, you can select an element in the dom tree (in the elements or inspector tab), then use hx.component($0) to retrieve the object backing that element (if there is one)
Examples

HTML

<div id="my-tag-input"></div>
<button class="hx-btn" id="my-button">Get Tags</button>

JavaScript

new hx.TagInput('#my-tag-input')

hx.select('#my-button').on('click', function(){
  var tagInput = hx.component('#my-tag-input')
  hx.notify.info('Tags: ' + tagInput.items().join(', '))
})

HTML

<form id="form">
  <input name="firstname" placeholder="Firstname" type="text">
  <input name="surname" placeholder="Surname" type="text">
  <button class="hx-btn hx-action" id="click-button" type="button">Submit</button>
</form>

JavaScript

var element = hx.select('#form')

var api = {
  data: function () {
    return element.selectAll('input').map(function (sel) {
      return sel.attr('name') + ': ' + sel.value()
    })
  }
}

// Register the component against the element
hx.component.register(element.node(), api)

// Call into the component api to get the value
hx.select('#click-button').on('click', function () {
  data = element.component().data()
  hx.notify.info(data[0])
  hx.notify.info(data[1])
})
Api
Prototypes
Selection
Methods
componentObject / Array[Object]
Returns the component backing the first element in the selection.
Returns
The objects backing the selected element.
componentsArray[Object] / Array[Array[Object]]
Returns the components backing the selected elements.
Returns
The objects backing the selected element.
Functions
hx.componentnodeString / HTMLElementObject
Returns the component backing the element passed in.
Arguments
nodeString / HTMLElement
The element to retrieve the component from (or a css selector that uniqely identifies an element)
Returns
Object
The object backing the element passed in.
hx.component.registernodeString / HTMLElementcomponentObject
Registers a component to the element passed in.
Arguments
nodeString / HTMLElement
The element to register the component for (or a css selector that uniquely identifies an element)
component
An object containing properties or methods that should be accessible on an element's component.
hx.componentsnodeString / HTMLElementArray[Object]
Returns the components backing the element passed in.
Arguments
nodeString / HTMLElement
The element to retrieve the components from (or a css selector that uniquely identifies an element)
Returns
The objects backing the element passed in.
hx.components.clearselectorElement / String
Clears all components from an element
Arguments
selectorElement / String
The element to remove all components from