es-databinding

Two way data binding in JavaScript

Synopsis

es-databinding (DataBinder) - two-way data binding library.

Installation

npm i --save es-databinding
or
git clone https://github.com/Zlobin/es-databinding.git
cd es-databinding && npm i && webpack

Examples

var userState = {
  firstName: 'John',
  lastName: 'Doe',
  fullName: '',
  sex: {
    active: 'M',
    data: {
      m: 'Man',
      w: 'Woman'
    }
  }
};

var cartState = {
  total: 0,
  items: [
    'Item 1',
    'Item 2',
    'Item 3'
  ]
};

var binding = {
  'user.sex.active': 'span.active',
  'user.firstName': '#first-name',
  'user.fullName': {
    // DOM element.
    el: '#fullName',
    callback: function() {
      // Will be called after changing element value.
    },
    parse: function() {
      // When apply from DOM to state.
    },
    transform: function(data) {
      // When applying from state to DOM.
      // Show how to transform data.
      // Example:
      // return `${data.value} USD`;
    }
  },
  'cart.items': '.cart-items',
  'cart.total': '#cart-total'
};

var binder = DataBinder(
  {
    user: userState,
    cart: cartState
  },
  binding
);

Manual changing state.

binder.state.user.firstName = 'John';

Export

binder.export();

Pros:

• No setTimeout ot setInterval.
• No dependencies.
• Small size ~6.5kb in packed, ~2kb gzipped.
• Easy to maintain and to extend.
• ES2015

TODO

• Add more tests.
• Add more examples.
• Add middleware pattern into setting value (to validating, for instance).
• Add support for path like 'user.*.state'.
• Implement parse method.
• Add benchmarks.