List component based on DataTier binding engine
ISC License
data-tier-list
data-tier-list
is a WebComponent, that provides repetative view functionality given any HTML template and a data set.
Main features and concepts:
Array
, Object
data-tier-list
relies on a data-tier library for the model-view tying part.
data-tier-list
's HTML binding declaration API adheres to the data-tier
's one here. See specific details below, in API section.
For a preview/playground you are welcome to:
Use regular npm install data-tier-list --save-prod
to use the library from your local environment:
import 'node_modules/data-tier-list/dist/data-tier-list.min.js';
Alternatively, a CDN deployment available (AWS driven), so one can import it directly:
import 'https://libs.gullerya.com/data-tier-list/x.y.z/data-tier-list.min.js';
Note: replace the
x.y.z
by the desired version, one of the listed in the changelog.
CDN features:
CDN disro is accompanied with SRI hashes, that are found in the
sri.json
file. Browse to the relevant version's file revision by this example -https://github.com/gullerya/data-tier-list/blob/v2.2.1/sri.json
, while replacing the2.2.1
part with the relevant one.
data-tier-list
's HTML binding declaration API adheres to the data-tier
's one here.
The dataset of items is set/updated via the items
property of the data-tier-list
element, for example:
<data tier list>.items = [ 1, 2, 3 ];
items
elements can be anything from primitive values to complex object structures.
Each item will be shown according to the item template.
Light DOM of the data-tier-list
serves as a template for a single item.
data-tier-list
element self and its light DOM are not displayed.
Details:
item
as scope key (see examples below)<data-tier-list>
<div>
<span data-tie="item:title"></span>
<span data-tie="item:fromYear"></span>
<span data-tie="item:albumsTotal"></span>
</div>
</data-tier-list>
And then supply data:
const dtl = document.querySelector('data-tier-list');
dtl.items = [
{ title: '..', fromYear: 1991, albumsTotal: 3 },
{ title: '..', fromYear: 1992, albumsTotal: 5 },
{ title: '..', fromYear: 1993, albumsTotal: 7 }
]