Ember Latest

The latest build of Ember.

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0-rc.4.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Content Editable</h1>
    {{#linkTo 'other'}}Route{{/linkTo}}
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="other">
    <div>
        Other route!
        {{view App.ContenteditableView valueBinding="coolProperty" contenteditableBinding=currentUserIsAdmin}}
        <button {{action save}}>Save</button>
    </div>        
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

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

App.OtherController = Ember.Controller.extend({
    currentUserIsAdmin: true,
    coolProperty: "Editable text",
    save: function() {
        window.alert(this.get('coolProperty'));
    }
})

App.Router.map(function() {
    this.route("other")
})

App.ContenteditableView = Em.View.extend({
	tagName: 'div',
	attributeBindings: ['contenteditable'],

    didInsertElement: function() {
        this.updateHtml();
        debugger;
    },

	// Variables:
	contenteditable: 'true',
	isUserTyping: false,

	// Observers:
	valueObserver: (function() {
		if (!this.get('isUserTyping') && this.get('value')) {
			this.updateHtml();
		}
	}).observes('value'),

    updateHtml: function() {
        this.$().html(this.get('value'));
    },
	// Events:
	focusOut: function() {
		this.set('isUserTyping', false);
	},

	keyDown: function(event) {
		if (!event.metaKey) {
			this.set('isUserTyping', true);
		}
	},

	keyUp: function(event) {
		this.set('value', this.$().html());
	}

});