npm install alight
bower install alight
- Download from site
- CDN cdn.rawgit.com/alight.js
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
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.
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.
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" />
- You can use directive al-init, to call js* expression, e.g.
al-init="count=7; foo(count);"
, read more- direct-directive
- Add and remove html blocks, directives al-if and al-ifnot, jsfiddle example, example 2
- Repeat blocks: al-repeat
- Insert or load custom HTML: al-html
- Component