Numeric Production Mechanism

    observable

    2.1.4 • Public • Published

    observable

    A function as representation of a trackable mutable value.

    testling badge

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

    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 + (&& 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

    License

    MIT

    Keywords

    none

    Install

    npm i observable

    DownloadsWeekly Downloads

    930

    Version

    2.1.4

    License

    MIT

    Last publish

    Collaborators

    • raynos
    • dominictarr