A few ways to bind a model to the DOM¶

1. Auto binding, al-app¶

alight() is called on start system, it takes each element with al-app and bind it.

html¶

<div al-app al-init="title='Hello!'">
    <input al-value="title" type="text" class="form-control" />
    <p>{{title}}</p>
</div>

Example on jsfiddle

2. Manual binding with alight()¶

You can bind custom elements with alight()

html¶

<div id="app" al-init="title='Hello!'">
    <input al-value="title" type="text" class="form-control" />
    <p>{{title}}</p>
</div>

javascript¶

alight('#app');  // bind to DOM

Example on jsfiddle

3. To bind to element with no DOM¶

html¶

<div id="app"></div>

javascript¶

var tag = document.createElement('div');  // element
tag.innerHTML = '<input al-value="title" type="text" class="form-control" /><p>{{title}}</p>';  // template

alight(tag, {title: 'Hello!'});  // binding

document.querySelector('#app').appendChild(tag);  // append to DOM

Example on jsfiddle

4. Manual binding #2¶

html¶

<div id="app">
    <input al-value="name" type="text" />
    {{name}} <br/>
    <button @click="click()">Set Hello</button>
</div>

javascript¶

var data = {
    name: 'Some text',
    click: function() {
        data.name = 'Hello';
    }
};

alight('#app', data);

Example on jsfiddle

comments powered by Disqus