data-tier-list

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.

Changelog is here

Preview

For a preview/playground you are welcome to: TBD

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

API

• data-tier-list element self and it's light DOM are not displayed
• light DOM of the data-tier-list is taken as a template for a single item
  • 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 error (eg more than one child) throws, list remains untouched