To bind any attribute on any element, you can simply use binding expression with prefix atom- that will set corresponding attribute on the element. Different types of binding (One Time, One Way and Two Ways) will be explained in binding chapter.
to set Text of any element (innerText or textContent), you can set atom-text property.
To enable or disable any element based on a aboolean condition, you can use atom-is-enabled attribute on any element for binding as shown below.
To use checkboxes to perform binding to Boolean data, you can use atom-checked attribute as shown below. Checked attribute can only be used with input type checkbox.
Class attribute behaves little differently then any other HTML attributes. Class attribute basically toggles between different values.
We are using jquery.maskedinput plugin to create input mask, you can specify input mask as atom-mask='99:99'
For advanced settings, you can specify anonymous object as atom-mask="{ {mask:'99:99', settings: { } } }"
Use of atom-html should be avoided as long as possible, this is only available for displaying plain HTML content. This property does not use any Atoms.js functionality and does not do any binding. You should use templates to create bindable html content.
We recommended using template mechanism instead of atom-html property, however in sometimes it may be helpful to know that you can set innerHTML by using atom-html property. You must know that atom-html does not initialize any binding within itself, it is pure HTML replacement.
HTML5 specifications states that any extra attribute on element should be named with data- prefix. However, since Atoms.js is UI framework and Atoms.js has specific named property called data which carries data as per English language. Using data prefix causes confusion, as we are talking about UI attributes and not specifically data.
<span data-text="{$data.FirstName}"></span>
Above code looks confusing. Not only this, Atoms.js has many controls and many properties, each properties are atom- properties. To make it completely HTML5 compliant, we tried following.
<span data-atom-text="{$data.FirstName}"></span>
Which is also very confusing, and it gets longer and longer. In our future version, we are planning to write pre-processor for Atoms.js, which will convert your code from Atoms.js to HTML5 compliant HTML+JS by stripping all atom- attributes and encapsulate them into a separate script initializer which will also help in obfuscating the code.
Even for that transition, you will not have to change your code.