Alight in 7 steps¶
1. Install¶
npm install alightbower 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>
Expression as template¶
<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" />
6. How to call function/code¶
- You can use directive al-init, to call JS* expression, e.g.
al-init="count=7; foo(count);", read more- Call a function from HTML, direct-directive