Data Binding

Data-binding allows you to mark an HTML element as bound to a key in the model, and have the value in the model synchronize automatically with the value in the element. Synchronization is two way and works for any element that can display text.

	// get the current user from the model
	let user = { firstName: "", lastName: "" }

	// set the current user into the model
	a7.model.set( "user", user )

Use the data-bind attribute to set which property the control should bind to. It can bind to a key of the model, user or a subkey, user.firstName.

<input
	type="text"
	class="form-input"
	id="firstName"
	name="firstName"
	data-bind="user.firstName"
/>

<input
	type="text"
	class="form-input"
	id="lastName"
	name="lastName"
	data-bind="user.lastName"
/>

Binding works automatically when the data-bind directive is attached to HTML in the template of an alt-seven View file. Otherwise, for static HTML, you must call the bind function manually.

let ele = document.getElementById("myElement")
a7.model.bind(ele.attributes['data-bind'].value, ele)