Overview
data-tier
('tier' from 'to tie') is a two way binding (MVVM) library targeting client (browser) HTML/Javascript applications.
data-tier
relies on an Observable
-driven event cycle, having an embedded object-observer
as the default Observable
provider.
It is highly advised to briefly review the library's Lifecycle documentation for a main concepts. Once ready, data-tier
's approach to client app architecture will also have a bunch of useful information on when and how to employ data binding in a modern client applications in a non-intrusive, non-prisoning, managable and extensible way.
Support matrix
61+ | 60+ | 79+
-
2.9.0
- implemented issue #42 - added a possibility to update tie's model as a whole via new API:
DataTier.ties.update(key, newModel);
- upgraded dependencies
-
2.8.7
- upgraded
object-observer
dependency, bearing an important, yet meanwhile experimental, functionality for a repeater like consumers
-
2.7.2
- adding experimental scoped tying capabilities - not yet publically available
2.0.0
version was an API breaking version! While migration from an old API to the new one is easy (remove the notion of model
property everywhere in JS) - please, take care to go over the updated APIs.
Loading the library
import * as DataTier from './dist/data-tier.min.js';
Basic example
As many similar libraries do, data-tier
also employes the two:
- declarative part of binding views to model found in HTML
- functional part of defining and operating on the model in JavaScript
Let's see how it plays in the code.
functional (JS) part
Having data model defined, for example, as:
let bands = [
{
id: 1234,
name: 'Dream Theater',
since: 1985,
albums: [
{ id: 2345, year: 1988, name: 'When Dream and Day Unite' },
{ id: 2346, year: 1991, name: 'Images and Words' }
]
}
];
one can create a tie
keyed, say, 'bandsTie', having its data set to the bands array:
const bandsModel = DataTier.ties.create('bandsTie', bands);
create
API returns an Observable
clone of the provided object
/array
.
If no model provided, data-tier
will create an empty object model by default.
bandsModel
from our example may be operated on as a usual JS object
/array
, but it is also being observed by data-tier
for any (deep) changes.
Any direct (JS driven) change will be reflected in the tied views.
Also, any relevant changes from the views will be reflected in the bandsModel
back.
declarative (HTML) part
Any UI element may be tied to the model using the key and the path:
<span data-tie="bandsTie:length"></span>
<div>
<span data-tie="bandsTie:0.albums.1.name"></span>
<custom-album-viewer data-tie="bandsTie:0.albums.1 => data"></custom-album-viewer>
</div>
For more details see API reference.
Extensions
I believe, that data-tier
as a framework should serve a single purpose of tying the model with the view in its very basic form: propagating the changes/values to the relevant recipient/s (more conceptual details and examples here).
Functionalities like repeater
, router
and other well known UI paradigms should be provided by a dedicated components, probably, yet not necessary, built on top of data-tier
or any other framework.
Me myself investing some effort in building data-tier
oriented components. I'll maintain the list below, updating it from time to time (please update me if you have something to add here).
data-tier-list
- repeater-like component to render a list of a similar items based on a single templatei18n
- internationalization library, mostly concerned with translation, where dynamic replacement of the localized texts upon active locale change is driven by data-tier
Documentation
API
WebComponents, ShadowDOM, MicroFrontends
Tutorials