Normal Polygamous Marriage

    data-tier-list

    2.2.1 • Public • Published

    NPM License: ISC

    Quality pipeline Codecov Codacy

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

    Install

    npm i data-tier-list

    DownloadsWeekly Downloads

    117

    Version

    2.2.1

    License

    ISC

    Unpacked Size

    29.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • yuri.guller