Simple Data Binding Example

A very simple views data binding example using jQuery + CoffeeScript

HTML

<input type="text" data-bind-cat-1="name" />
<input type="text" data-bind-cat-1="name" />

CoffeeScript

class DataBinder extends jQuery
  pubSub: null

  constructor: (objectid) ->
    @pubSub    = $ {}
    attribute = "data-bind-#{objectid}"
    message   = "#{objectid}:change"

    $(document).on "change", "[#{attribute}]", (event) =>   
      $elem = $(event.target)
      @pubSub.trigger message, [$elem.attr(attribute), $elem.val()]

    @pubSub.on message, (event, property, new_val) ->
      for elem in $("[#{attribute}=#{property}]")
        $elem = $(elem)

        if $elem.is("input, textarea, select")
          $elem.val new_val
        else
          $elm.html new_val

class Cat
  binder: null
  pubSub: null
  message: ''

  set: (attr, val) ->
    @[attr] = val
    @pubSub.trigger @message, [attr, val]

  get: (attr) -> 
    @[attr]

  constructor: (id) ->
    @binder  = new DataBinder(id)
    @pubSub  = @binder.pubSub
    @message = "#{id}:change"
     
    @pubSub.on @message, (event, attr, value) =>
      @[attr] = value

cat = new Cat("cat-1")
cat.set("name", "Wiswell")