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.
<div al-app al-init="title='Hello!'">
<input al-value="title" type="text" class="form-control" />
<p>{{title}}</p>
</div>
2. Manual binding with alight()¶
You can bind custom elements with alight()
<div id="app" al-init="title='Hello!'">
<input al-value="title" type="text" class="form-control" />
<p>{{title}}</p>
</div>
alight('#app'); // bind to DOM
3. To bind to element with no DOM¶
<div id="app"></div>
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
4. Manual binding #2¶
<div id="app">
<input al-value="name" type="text" />
{{name}} <br/>
<button @click="click()">Set Hello</button>
</div>
var data = {
name: 'Some text',
click: function() {
data.name = 'Hello';
}
};
alight('#app', data);