Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
bind.js - simple two way data binding to HTML and callbacks
JavaScript HTML
branch: master


Simple data binding for callbacks & HTML (also node.js compatible).

Test status



setters/gettings, bind, qSA, getOwnPropertyNames, forEach - basically evergreen browser


  • obj: this is your data structure that is copied in to the Bind
  • mapping: this is a key/value pair of object path to DOM selector or callback function


var data = Bind({
  me: {
    name: "@rem",
    score: 11,
    location: {
      city: 'Brighton',
      country: 'England'
}, {
  'me.score': '#score',
  '': '#name',
  '': function (city) {
    alert( + "'s city is " + city);
}); = 'London'; = {
  name: 'Remy Sharp',
  score: 20


I've added array support by creating an augmented array in place of your original array. It's pretty filthy, but works (TODO: only tested in Mocha, Node & Chrome - need to extend).

Simple example:

var data = Bind({
  cats: ['ninja', 'missy', 'dizzy']
}, {
  'cats': function (cats, old) {
    console.log('cats changed!', cats, old);
    document.querySelector('#cats').innerHTML = '<li>' + cats.join('<li>');
  'cats.0': function (newCat, oldCat) {
    console.log('The newest cat at the start of our family is ' + newCat);



Deleted properties

There's no handling deleted properties. Once a property is deleted, if it's added back in again, it can't be tracked:; // updates element#score
delete; = 1; // does nothing = { // restores because the setter is still intact as is the map for me.score
  score: 1,
  // ... etc

New Properties

The bound object can't bind a new property path (certainly change existing property values), but new properties, like cats (in the example above) wouldn't have the mapping to know what to trigger (I do want to explore whether I can add an update method to re-read the mapping).

Something went wrong with that request. Please try again.