data-tier

Summary

DataTier ('tier' from 'to tie') is a service oriented framework, that provides two way binding (Model-View - View-Model, aka MVVM) in the domain of client HTML/Javascript applications. This library works tightly with Observable-driven event cycle, therefore it comes with an embedded object-observer.js library.

Yet, it is possible to provide any other Observable implementation, if it provides the same functionality. In this case you may want to use lighter data-tier distribution (bundled within the same npm module) without object-observer.js.

Support matrix: ₄₉₊, ₄₂₊, ₁₃₊

Support matrix is currently as wide as that of object-observer.js, assuming that in most of the cases consumers will not provide their own object-observer, but will use an embedded one. DataTier supports custom elements as well, obviously this functionality is available only on supporting environments.

Backlog:

• Support custom pre-processors for both data-to-view and view-to-data flows
• Add OOTB rule for HTML classes management
• API reference

Versions

• 0.6.0

  • Moved to object-observer.js library as an observation engine, were impacted both the API and the implementation.

• 0.5.41

  • First version, based on native Object.observe technology.

Loading the Library

You have 2 ways to load the library: into a window global scope, or a custom scope provided by you.

• Simple reference (script tag) to the data-tier.js in your HTML will load it into the global scope:

<script src="data-tier.js"></script>
<script>
	var person = { name: 'Uriya', age: 8 },
	    observablePerson = window.Observable.from(person);
	window.DataTier.ties.create('person', observablePerson);
</script>

• The snippet below exemplifies how to load the library into a custom scope (add error handling as appropriate):

var customNamespace = {},
    person = { name: 'Nava', age: 6 },
    observablePerson;

fetch('data-tier.js').then(function (response) {
	if (response.status === 200) {
		response.text().then(function (code) {
			Function(code).call(customNamespace);
			
			//	the below code is an example of consumption, locate it in your app lifecycle/flow as appropriate
			observablePerson = customNamespace.Observable.from(person);
			customNamespace.DataTier.ties.create('person', observablePerson);
		});
	}
});

• Note the usage of an embedded Observable along the way. As it has been mentioned before, you may provide your own Observable implementation and in this case more lightweigth data-tier-wo-oo.js will suite you more.
• Minified version is also available for both distributions, with and without object-observer.js.

Basic example

In essence, the purpose of the DataTier service is to tie model and view and sync between them automatically once changes detected in either one or another.

In order to let this happen, two actions need to be done:

1. any model to be shown should be registered in the DataTier service
2. DOM elements intended to visualize the model need to be decorated with an appropriate declaration

The above two may happen in any order, in any phase in the application lifecycle. DataTier supports lazy binding, watching for DOM changes as well as for a data changes and will pick up any new linking information relevant and tie the things up.

Let's review the actual example, where we have some user object which is our model and we want to bind it to some interactive view of it.

Functional part

var user = {
	name: 'User Name',
	age: 7,
	active: true,
	address: {
		street: 'Some street',
		apartment: 15
	}
},
observableUser = Observable.from(user);

DataTier.ties.create('userInfo', observableUser);

Declarative part

<div>
	<span data-tie-text="userInfo:name"></span>
	<span data-tie-text="userInfo:age"></span>
	<input type="checkbox" data-tie-value="userInfo:active">
	<div>
		<input type="text" data-tie-value="userInfo:address.street">
		<input type="text" data-tie-value="userInfo:address.apartment">
	</div>
</div>

For a more thorough API documentation see API Reference page.