Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


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.


For JavaScript examples, please visit the project website.

Basics (CoffeeScript)

# Extend from Observable
class Person extends Observable
  constructor: (@firstName, @lastName) ->
  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 Rivets Iota Observable Adapter. This particular example code also needs jQuery.

# Create counter object and make it Observable
model =
    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.