A few ways to bind a model to the DOM

1. Manual binding, applyBindings

html

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

Make scope, then to bind it to the DOM with alight.applyBindings

js

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

var scope = alight.Scope();  // make a Scope
scope.title = 'Hello!';  // set init value

alight.applyBindings(scope, 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>

js

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

alight.bootstrap([tag]);  // bind to DOM

Example on jsfiddle

4. Deferred binding, alight.bootstrap

html

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

js

alight.autostart = false;
setTimeout(alight.bootstrap, 2000);

Example on jsfiddle

5. To bind to element with no DOM

html

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

js

var tag = document.createElement('div');  // make an element
tag.innerHTML = '<input al-value="title" type="text" class="form-control" /><p>{{title}}</p>';  // set up template
var scope = alight.Scope();  // make a scope
scope.title = 'Hello!';  // set init value

alight.applyBindings(scope, tag);  // apply bindings

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

Example on jsfiddle

6. Manual binding #2

html

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

js

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

Example on jsfiddle

Способы привязки модели к DOM

1. Ручная привязка, applyBindings

html

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

Создаем scope и привязываем к DOM с помощью alight.applyBindings

js

var tag = document.querySelector('#app');  // Выбираем тег

var scope = alight.Scope();  // Делаем новый scope
scope.title = 'Hello!';  // Устанавливаем начальное значение

alight.applyBindings(scope, tag);  // Привязываем scope к DOM

Пример на jsfiddle

2. Авто-привязка, al-app

При запуске запускается alight.bootstrap, который ищет все элементы с атрибутом al-app и вызывает alight.applyBindings

html

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

Пример на jsfiddle

3. Ручная привязка с помощью alight.bootstrap

При вызове alight.bootstrap можно указать теги для привязки

html

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

js

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

alight.bootstrap([tag]);  // bind to DOM

Пример на jsfiddle

4. Отложенная привязка, alight.bootstrap

html

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

js

alight.autostart = false;
setTimeout(alight.bootstrap, 2000);

Пример на jsfiddle

5. Привязка вне документа

html

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

js

var tag = document.createElement('div');  // Создаем элемент
tag.innerHTML = '<input al-value="title" type="text" class="form-control" /><p>{{title}}</p>';  // Ставим шаблон
var scope = alight.Scope();  // Делаем scope
scope.title = 'Hello!';  // Начальное значение

alight.applyBindings(scope, tag);  // Биндим к элементу

document.querySelector('#app').appendChild(tag);  // Выводим в документ

Пример на jsfiddle

6. Ручная привязка #2

html

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

js

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

Пример на jsfiddle

comments powered by Disqus