mini data binding

binding.js

$('body')
  .on 'focus', '[contenteditable]', ->
      $this = $(this)
      $this.data 'before', $this.html()
  .on 'blur keyup paste input', '[contenteditable]', ->
      $this = $(this)
      if $this.data('before') isnt $this.html()
          $this.data 'before', $this.html()
          $this.trigger('change')
      new_text = $this[0].innerText
      # hacky. will bind form text and element text
      $('.'+$this.data('bind-id')).val(new_text).text(new_text)

some_view.haml

// place data-input-id attr on element with a class that targets elements you want to bind to
// this will bind the contenteditable data to the input val
%h1{contenteditable: "", :"data-bind-id" => "name-bind"} My Name
%input{:class => "name-bind"}