contenteditable binding example

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.4.js"></script>
<script type="text/x-handlebars" data-template-name="doc-template">
    {{#with content}}
        <article>
            <h1 class="title editable">{{{title}}</h1>
            <div class="content">
                <div class="info editable">{{info}}</div>
            </div>
        </article>
        <section>
            <button value="edit" class="edit-doc-toggle" {{action "toggleEdit"}}>Edit</button>
        </section>
    {{/with}}
</script>

JavaScript

App = Ember.Application.create({});

 App.doc = Ember.Object.extend({
    title : "Title",
    info  : "This is some info text."
  });

  App.docView = Ember.View.extend({
    templateName : "doc-template",
    toggleEdit: function(event) {
      if (this.isEditable) {
        this.isEditable = false;
        this.$('.editable').removeAttr('contenteditable');
        // WHAT CODE SHOULD GO HERE TO UPDATE THE PROPERTIES
        // OF THE DOC OBJECT?
        this.setPath('content.info', this.$('.editable.info > script').first()[0].nextSibling.wholeText);
        this.setPath('content.title', this.$('.editable.title > script').first()[0].nextSibling.wholeText);
        // That's what you can put here (may be another way but this seems really simple)
          
        this.$('.edit-doc-toggle').text('Edit');
      } else {
        this.isEditable = true;
        this.$('.editable').attr('contenteditable','true');
        this.$('.edit-doc-toggle').text('Save');
      }
    }
  });

  App.controller = Ember.Object.create({
    content: App.doc.create(),
    // Should be observing changes in your controller not on your model
    infoChanged: function() {
      console.dir(this.getPath('content.info'));
    }.observes('content.info')
      
  });

  window.view = App.docView.create({
      contentBinding: 'App.controller.content'
  });
  view.append();