domflow

Tiny Reactive DOM Programming Library

Lightweight Reactive DOM Programming Library. It only provides an API for your own data-binding abstractions.

$ npm install domflow
<div>
  <label foo-text="title"></label>
  <textarea foo-value="">
  </textarea>
</div>
domflow = require('domflow')
attrs = require('attrs') // you can use any other event/model library instead of attrs 
 
foo = domflow({
  'foo-text': fooText, // see below for implementation 
  'foo-value': fooValue
})
 
foo('div', attrs({
  caption: 'hello. tell us about your self:',
  input: 'type here'
}))

foo-text

function fooText(elementcontext){
  text = context[ element.getAttribute('foo-text') ]
 
  element.innerHTML = text
 
  text.subscribe(function(update){
    element.innerHTML = update
  })
}

foo-value

function fooValue(elementcontext){
  value = context[ element.getAttribute('foo-text') ]
 
  element.value = value
 
  value.subscribe(function(update){
    element.innerHTML = update
  })
 
  element.onkeyup = function(){
    value(element.value)
  }
}