Data Controller Module

Data Controller is browser module that aims to let implementations to know about data updates inside a data attribute of a host object in a simple way.

It uses a Proxy to capture any modification in the target data and comunicates changes dispatching an event called dataUpdated.

Installing

Using NPM:

npm i @modnes/data-controller

          

Downloading package:

Usage

This package is intended to be used as an ES module.

import DataController from '../node_modules/@modnes/data-controller.js'

          

The Data Controller must receive an object that implements the EventTarget interface for to it be able to dispatch events. This means it can be used within custom elements for example. ;-)

Working Example

This is a working example using Data Controller in a custom element:

Methods

Data Controller provides more two main methods: bindDOM() and bindForm(). These methods allow building applications using the Two Way Data Binding idea.

bindDOM

The bindDOM() method uses an array containing mapping set that bind properties modifications to elements in DOM. Each map must to set the property attribute from data in the host object.

bindForm

The bindForm() receives a form and binds each form element to a property from data by it name attribute.