Alight in 7 steps¶
1. Install¶
npm install alight
bower install alight
- Download from site
- CDN cdn.rawgit.com/alight.js
2. Bind data to DOM/HTML¶
There is a few ways to bind:
- Using alight(element, data), example
- Using jQuery: $(selector).alight() example
- Using attribute al-app example
- More ways to bind
3. How to listen events¶
You can bind any events using syntax al-on.event.modifier="expression"
or shorter version @event.modifier="expression"
, example:
<button al-on.click="onClick()"></button>
<button @click="onClick()"></button>
Also you can use different modifiers, example:
<input @keydown.left="goLeft()" />
<div @mousemove.throttle-300="moveWithDelay()"></div>
More information and examples is here.
4. Set attributes¶
You can change value of any attribute using al-attr.attrName.modifier="value"
or shorter version :attrName.modifier="value"
, example:
<input al-attr.hidden="value" />
<input :hidden="value" />
<input al-attr.disabled="value" />
<input :disabled="value" />
<img al-attr.src="linkToImage" />
<img :src="linkToImage" />
Style and class:
<div :class.red="redDiv"></div>
<div :style.border-color="color"></div>
<img al-attr.src.tpl="/server/images/{{id}}" />
<img :src.tpl="/server/images/{{id}}" />
More information is here.
5. Two-way binding¶
Set and get value of an element, you can use directives:
- al-value
- al-checked
- al-radio
- al-focused
- al-select
Example:
<input type="text" al-value="title" /> {{title}}
<input type="checkbox" al-checked="model" />