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)

v

How 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').signal

observable

value

input, & transform

not

compute

hover & focus

signal

License

Current Tags

19 Versions