A few ways to bind a model to the DOM¶
1. Manual binding¶
<div id="app">
<input al-value="title" type="text" class="form-control" />
<p>{{title}}</p>
</div>
Make ChangeDetector, then to bind it to the DOM with alight.applyBindings
var tag = document.querySelector('#app'); // take the tag
var scope = {
title: 'Hello!'
};
var cd = alight.ChangeDetector(scope);
alight.bind(cd, tag); // apply bindings
2. Auto binding, al-app¶
alight.bootstrap is called on start system, it takes each element with al-app and execute alight.applyBindings
<div al-app al-init="title='Hello!'">
<input al-value="title" type="text" class="form-control" />
<p>{{title}}</p>
</div>
3. Manual binding with alight.bootstrap¶
You can bind custom elements with alight.bootstrap
<div id="app" al-init="title='Hello!'">
<input al-value="title" type="text" class="form-control" />
<p>{{title}}</p>
</div>
alight.bootstrap('#app'); // bind to DOM
4. To bind to element with no DOM¶
<div id="app"></div>
var tag = document.createElement('div'); // make an element
// set up template
tag.innerHTML = '<input al-value="title" type="text" class="form-control" /><p>{{title}}</p>';
alight.bootstrap(tag, {
title: 'Hello!'
})
document.querySelector('#app').appendChild(tag); // append to DOM
5. Manual binding #2¶
<div id="app">
<input al-value="name" type="text" />
{{name}} <br/>
<button al-click="click()">Set Hello</button>
</div>
alight.bootstrap('#app', {
name: 'Some text'
click: function() {
this.name = 'Hello'
}
});