editable

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/data/ember-data-latest.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
	Content 1:
    {{view App.EditableView contentBinding="App.data1"}}
    Content 2:
  {{view App.EditableView contentBinding="App.data2"}}  
    
    <br><br>
    <hr>
    data1 value = {{App.data1.value}}<br>
    data2 value = {{App.data2.value}}<br>
</script>

JavaScript

App = Ember.Application.create();

App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({
    templateName: 'application'
});

App.EditableView = Em.View.extend({
    contenteditable: "true",
    attributeBindings: ["contenteditable"],
    
    _observeContent: (function() {
        this._displayContent();
    }).observes('value'),
    
    didInsertElement: function() {
        this._displayContent();
    },
    _displayContent: function() {
        this.$().html(this.get('value'));
    },

    init: function() {
        this._super();
        this.on("focusOut", this, this._elementValueDidChange);
    },
    _elementValueDidChange: function() {
        newData = this.stripTags(this.$())
        this.set('value', newData);
    },
    stripTags: function(element) {
        theHtml = element.html();
        matchTags = theHtml.match(/<\/script>(.*?)<script/);          
        if (matchTags) {
            if (matchTags[1] == "") {
                theHtml = theHtml.substring(0, theHtml.indexOf('<script'))
                    } else {
                theHtml = matchTags[1];
            }
        }        
        return theHtml.replace(/<div><br><\/div>/gi,'<br>').replace(/<div>/gi,'<br>').replace(/<\/div>/gi,'')
    }
        
});

App.Data = Em.Object.extend({
  value: DS.attr('string'),
});

App.data1 = Ember.Object.create();
App.data1.set('value', 'value1');
App.data2 = Ember.Object.create();
App.data2.set('value', 'value2');

App.Router = Ember.Router.extend({
    root: Em.Route.extend({
        index: Em.Route.extend({
            route: '/',
           
        })
    })
})
    
App.initialize()