Ember and HTML5 contenteditable property

Question

I just found out about the contenteditable spec in HTML5. Basically, it allows any html element to be editable when you click on it, just by setting that property to true. For example:

<p contenteditable=true>Editable content</p>

would be editablewhen you clicked on it.

Unfortunately this doesn't notify Ember about the change Ember objects, so Ember doesn't know that the value has been changed.

I'm not sure how bindings work, but would this be possible to implement somehow?

Here's a fiddle to show what I'm talking about.

Answer 1

On the contrary, using contenteditable is both perfectly possible and a great approach to certain use cases in which you wish to implement input areas that resize automatically etc.

Ember.js already contains a view class for <input> elements, but none for <div> elements with contenteditable set to true. The key here is to bind to the HTML content of the div and expose a value property just like Ember.TextField has it.

I've covered this in a blog post which can be found here: http://www.kaspertidemann.com/handling-contenteditable-in-ember-js-via-app-contenteditableview/

The blog post boils down to the introduction of App.ContenteditableView, the source of which can be found here: https://github.com/KasperTidemann/ember-contenteditable-view

I hope this helps!

Answer 2

I wouldn't use the html5 contenteditable, since, like you said, you it doesn't talk with ember.

Check out this fiddle to see how I would do it in ember. It doesn't have the coolness factor of contenteditable, but at least you know it'll work on all browsers.