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:

• supported data set types: Array, Object
• if a provided data set is is not an observable, it is transformed (cloned) into such one
• data set mutations are observed and reflected
• template mutations are observed and reflected
• uniformity of a data items is not validated/enforced

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.

Changelog is here.

Preview

For a preview/playground you are welcome to:

• CodePen of a simple exapmle of list of primitive values
• CodePen of a more involved example of list of rows, table of data

Install

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:

• HTTPS only, no untrusted man-in-the-middle
• highly available (with many geo spread edges)
• agressive caching setup

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 the 2.2.1 part with the relevant one.

API

data-tier-list's HTML binding declaration API adheres to the data-tier's one here.

Data

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.

View

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:

• within a template use binding declaration syntax is as here, with item as scope key (see examples below)
• template is observed for any changes; replacement of it or a change of its child/ren triggers a full (re)render of the list
• template may have at most one top level element (any nested elements tree allowed)
• template removal cleans the list
• template errors (eg more than one child) leave list untouched

Examples

List of bands

<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 }
]