Emit reactive-compatible change events whenever an object changes.
$ component install timoxley/react
var react = require('react')
var clock = {
time: new Date()
}
setInterval(function() {
// whoa, no need to call any silly .set() methods
clock.time = new Date()
}, 1000)
react(clock).on('change', function(prop, newValue, oldValue) {
console.log("The "+prop+" is now: " + newValue)
// => the time is now Sat Jan 05 2013 11:38:31 GMT+0800 (SGT)
})
// alternatively, listen for particular property changes:
react(clock).on('change time', function(newValue, oldValue) {
console.log("The time is: " + newValue)
// => the time is now Sat Jan 05 2013 11:38:31 GMT+0800 (SGT)
})
If you're using react
with component/reactive you can
simply wrap your data with react()
as you pass it to reactive
:
reactive(element, react(model))
If your data source is an event Emitter, you can use react
in your
data type's constructor to make all instances reactive:
// Emitter data type
function Stock(name, value) {
this.name = name
this.value = value
react(this)
}
Stock.prototype = new Emitter()
var AAPL = new Stock('AAPL', 100)
AAPL.on('change value', function(value) {
console.log('new value for '+ this.name +' is', value)
})
reactive
needs an Emitter
(or something that looks like one). If the object you pass to react
isn't an Emitter
, react
returns a new Emitter
with the passed-in object set as the prototype.
// Non-Emitter data type
function Stock(name, value) {
this.name = name
this.value = value
}
var AAPL = new Stock('AAPL', 100)
var stockListener = react(AAPL)
stockListener.on('change value', function(value) {
// note the default value of `this` in this context is
// a copy of the data source.
console.log('new value for '+ this.name +' is', value)
})
Make an object reactive, i.e. emit change
events when its properties change.
Takes an optional list of properties to monitor for changes. Without
properties
, events will fire whenever any property on obj
changes.
MIT