Alight in 7 steps

1. Install

  1. npm install alight
  2. bower install alight
  3. Download from site
  4. CDN

2. Bind data to DOM/HTML

There is a few ways to bind:

  1. Using alight(element, data), example
  2. Using jQuery: $(selector).alight() example
  3. Using attribute al-app example
  4. 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"

<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"

<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 :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:

<input type="text" al-value="title" /> {{title}}
<input type="checkbox" al-checked="model" />

6. How to call function/code

  1. You can use directive al-init, to call JS* expression, e.g. al-init="count=7; foo(count);", read more
  2. Call a function from HTML, direct-directive

7. Manipulate blocks

  1. Add and remove html blocks, directives al-if and al-ifnot, jsfiddle example, example 2
  2. Repeat blocks: al-repeat
  3. Insert or load custom HTML: al-html
  4. Component