A few ways to bind a model to the DOM¶

1. Manual binding¶

html¶

<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

code¶

var tag = document.querySelector('#app');  // take the tag

var scope = {
    title: 'Hello!'
};
var cd = alight.ChangeDetector(scope);

alight.bind(cd, tag);  // apply bindings

Example on jsfiddle

2. Auto binding, al-app¶

alight.bootstrap is called on start system, it takes each element with al-app and execute alight.applyBindings

html¶

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

Example on jsfiddle

3. Manual binding with alight.bootstrap¶

You can bind custom elements with alight.bootstrap

html¶

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

javascript¶

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

Example on jsfiddle

4. To bind to element with no DOM¶

html¶

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

javascript¶

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

Example on jsfiddle

5. Manual binding #2¶

html¶

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

javascript¶

alight.bootstrap('#app', {
    name: 'Some text'
    click: function() {
        this.name = 'Hello'
    }
});

Example on jsfiddle

comments powered by Disqus