DataBinder

Info

language        : TypeScript

module type  : 'commonJs'

dependencies: "@archjs/event-notifier"

description     :

A simple Typescript data-bind library that permits external predicates to intercept changes in object properties. This library uses dirty pattern and gives the user the ability to trigger changes by calling the member method 'update'.

Test coverage

Installation

npm install @archjs/databinder

package.json

{ ...
   dependencies: {
     ...
     "@archjs/databinder": "^"
     ...
}

This plugin has an install script, so when you load this module via npm it will automatically erase it's unecesary files. It uses "fs-extra" , "rimraf", "rmdir" @install.

For dev enviorment use git clone [email protected]:softem/archjs/core/databinder.git

Usage

creation

Using new DataBinder

 import { DataBinder } from "@archjs/databinder/databinder";
 ...
 /* no input data */
 var model0 = new DataBinder();
 /* basic data type as input */
 var model1 = new DataBinder( 24 );
 /* array as input */
 var model2 = new DataBinder( [24] );
 /* json object as input */
 var model3 = new DataBinder( {age:24} );

DataBinder data from nested data

When we have a nested json data object and we want each child node of the tree structure to be bindable we need to use the static method DataBinder.createRecursiveBinder( data )

 import { DataBinder } from "@archjs/databinder/databinder";
 var data  = { 
              user:{ 
                      id:24
                    , email:"[email protected]" 
              }
              , userInfo:{ 
                      age:24
                    , firstName: "John"
                    , lastName:  "Doe"
              } 
 };
 var model = DataBinder.createRecursiveBinder( data );

Bind handler to property change

   dataBinder.bind( <key:string> , <handler:Function> );

bind -> method

key -> string

handler->

function( data ){ ... } 

data ->

{ oldValue:any, newValue:any } 

example

var position:DataBinder = new DataBinder( {x:10,y:20} );
position.bind('x',function(data){ 
      var dx = (data.oldValue-data.newValue);
      console.log('moved element with dx = '+dx+'px' ); 
});
position['x'] = 21;   // dirty flag activated for 'x' key.
                   // observers are not notified!

position['x'] = 31    // dirty flag activated for 'x' key

position.update(); // observers are notified

output: moved element with dx = 21px