skeleton
JS ariato.js
Ariato comes with a tiny JavaScript skeleton which runs its components. It is ultra lightweight since there are less than 100 lines of JavaScript with no dependencies. Of course you can use it for your own application if you want to avoid other heavy JavaScript frameworks. It works with simple plain old JavaScript and standard HTML.
There are only 3 things to know that will be detailed below : controllers, events and roles.
A controller is a JavaScript function connected to a DOM element. Ariato looks for all the data-ariato="ControllerName" attributes and instanciates the relevant controller.
It handles nested names such as data-ariato="Account.Form". In that case a new object Account.Form is created and receives the DOM element as an argument.
The controller is automatically initialized with events and roles that we will discuss in the next sections. Moreover you can access directly to the container element with this.node from the controller.
Ariato helps you to listen to DOM events via the data-event attribute. It must contain the event name following by an arrow and the function name of the controller. The function is called with the event as the only argument. It's possible to specify as many event/function combinations you need.
Roles help you to access easily to DOM elements from your controller with a nice name instead of a CSS selector.
Roles are defined via the data-role="roleName" attribute.
All roles are stored in arrays into this.roles.roleName.
However if there is only 1 occurence of the role, there is the following shortcut to access it : this.roleName.
In this example that is the case for saveButton but not for textFields.