new-reactive

Build your own binding abstractions, based on observable attributes (npm.im/attr)

Lets you build your own UI->Data binding libraries.

It's based on observable attributes.

$ npm install new-reactive
<article class="fruit">
    <h1 cat-text="title"></h1>
    <a cat-href="fruits/{slug}/{id}">Apple #<span cat-text="id"></span></h1>
</article>
 
<script type="text/javascript">
 
    var attrs    = require('attrs'),
        reactive = require('new-reactive'),
        cat      = bindings.ns('cat'),
 
        fruit = attrs({
            id    : 314,
            slug  : 'finike-oranges',
            title : 'Finike Oranges'
        })
 
    fruit.title()
    // => 'Finike Oranges' 
 
    reactive(document.querySelector('.fruit'))
        .context(fruit)
        .use(cat) // cat is implemented on the next section
 
    tenSecondsLater(function(){
        context.id(156)
        context.slug('delicious-finike-oranges')
        context.title('Delicious Finike Oranges!!')
    })
 
</script> 
var cat = reactive.ns('cat')
 
cat.extend('href', function(elementupdate){
  text.setAttribute('href', update)
})
 
cat.extend('text', function(elementupdate){
  text.innerHTML = update
})
  • Impl destroy methods
  • Test iterating