Reactive-component NPM

reactive

Reactive template engine similar to Rivets minus the coffee script, and Caustic which no longer exists.

Installation

$ component install component/reactive

Example

Simply invoke reactive() on the element to wish to become the "template" for obj. The given obj must emit "change" events passing (prop, val), the template will react to these changes.

var reactive = require('reactive');
reactive(el, obj);

You may also map custom callbacks for formatting or messing with an element based on a change. The element, value, and object itself are passed as arguments.

var reactive = require('reactive');
reactive(el, user, {
  birthdate: function(el, date, user){
    el.textContent = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();
  }
});

Typically the callbacks would be a reference to the view itself, for example:

function ItemView(item) {
  this.item = item;
  this.el = tmpl.cloneNode(true);
  reactive(this.el, item, this);
}

ItemView.prototype = {
  filename: function(link, url){
    link.href = url;
    link.textContent = 'Download';
  },
  
  hasDownloads: function(){
    return !! this.item.filename;
  }
};