Package Exports

observable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (observable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

observable

A function as representation of a trackable mutable value.

Interactive Demo

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()

And, finally, if an observable is called with another function, f(function (v) {...}), it calls that function with the new value, whenever the value changes.

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))
  )
)

screen/scroll

var o = require('observable')
var h = require('hyperscript')

window.addEventListener('resize')

License

MIT