Iota Observable

Iota Observable is a tiny library written in the programming language CoffeeScript. It offers functions to create observable objects and make existing objects observable. Its primary use case is to be employed as part of a view layer with declarative data-binding in a JavaScript single page app. Because CoffeeScript compiles to JavaScript, you can use it with JavaScript as well.

Iota Observable has been designed to play nicely with Rivets, a little template engine with declarative data binding from Michael Richards. Both libraries strive to "do one thing and do it well". They leave everything else to your choice — a modular approach. You might want to give the Rivets & Iota Observable combo a chance if you feel that AngularJS, EmberJS, Knockout, Batman etc. are too invasive and big for your use case.

Examples

For JavaScript examples, please visit the project website.

Basics (CoffeeScript)

# Extend from Observable
class Person extends Observable
  constructor: (@firstName, @lastName) ->
    super()
    
  name: -> 
    @get('firstName') + ' ' + @get('lastName')

# Create a person
obj = new Person 'Bela', 'Bartók'

# Query initial value of name (normally done by view)
console.log 'Initial name: ' + obj.get('name')

# Register observer
obj.on 'name', -> console.log("Name has changed")

# Change property value, prints "Name has changed"
obj.set 'firstName', 'Béla'

With Rivets (CoffeeScript)

Needs jQuery and Rivets Iota Observable Adapter.

# Create counter object and make it Observable
model =
  counter:
    value: 5
    
Observable.makeObservable model.counter

# Bind counter value to a DOM element
template = '<div data-text="counter.value" />'
domElement = $(template)[0]
rivets.bind(domElement, model)

# Append DOM element to main tree
$(domElement).appendTo "body"

Further reading

Learn more on the project website.