observable
A function as representation of a trackable mutable value.
It's basically just a function that can be called in 3 ways,
If an observable is called with no arguments f(), it returns the current value.
If it is called with an argument f(value), it set that as the value.
var o = require('observable')
var v = o()
//set the value
v(Math.random())
//get the value
v()If an observable is called with another function, it calls that function with the new value, whenever the value changes.
v(function(v){
console.log('Was changed to', v)
})
And to stop being notifed of these changes, call the function that was returned
var stop = v(function(v){
console.log('Was changed to', v)
})
// then some time later
stop()
value
var o = require('observable')
var v = o()
v(0)
setInterval(function () {
v(v() + 1)
}, 500)
vHow is this demo updating in real-time like that?
It's because observable is integrated into
hyperscript!
input, & transform
observe a input field, and transform it into different string. this transformation is a one way observable.
var o = require('observable')
var h = require('hyperscript')
var yourName
h('div',
h('h3', 'hello, what is your name?',
yourName = h('input', {placeholder: 'enter name'})
),
h('h2', o.transform(o.input(yourName), function (v) {
return v ? 'Happy Birthday ' + v.toUpperCase() + ' !!!': ''
}), {style: {'font-family': 'Comic Sans MS'}})
)Oh, wow! wasn't that easy! and we did a lot of things there!
- made hyper text that updated in realtime
- read from an input as you typed
- transformed user input
And there is many other cool things we can do to!
not
Invert a boolean observable
var o = require('observable')
var h = require('hyperscript')
var _i, i
h('div',
_i = h('input', {type: 'checkbox'}),
'checked:', i = o.input(_i, 'checked', 'change'),
' !checked:', o.not(i)
)Hmm, I wonder if we could couple two things interms of each other?
var o = require('observable')
var h = require('hyperscript')
var _i = h('input', {type: 'checkbox'})
var _j = h('input', {type: 'checkbox'})
var i = o.input(_i, 'checked', 'change')
var j = o.input(_j, 'checked', 'change')
//just make i != j & j != i
i(Math.random() < 0.5)
o.bind2(o.not(i), j)
h('div', _i, _j)compute
Compute a value from others, like a computed value in SQL.
var o = require('observable')
var h = require('hyperscript')
var i, j
h('div',
i = h('input', {placeholder: 'first name'}),
j = h('input', {placeholder: 'last name'}),
h('h1', 'Greetings, ',
o.compute([o.input(i), o.input(j)], function (f, l) {
return f + ' ' + l + (f && l ? ' !' : '')
})
)
)hover & focus
var h = require('hyperscript')
var o = require('observable')
h('div',
strong = h('strong', {
contentEditable: true,
style:{display: 'inline-block'}
},
"editable thing"
),
h('ul',
h('li', 'focus: ', o.focus(strong)),
h('li', 'hover: ', o.hover(strong))
)
)signal
Like observable except only update listeners when the value actually changes.
var s = require('observable').signalLicense
MIT