Ember property and HTML5 contenteditable

Question

I just found out about the contenteditable spec in HTML5. Basically, it allows any html element to edit when you click on it by simply setting this property to true. For instance:

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

will be edited when you click on it.

Unfortunately, this does not tell Ember about changes to the Ember objects, so Ember does not know that the value has been changed.

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

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

Answer 1

Conversely, using contenteditable is a perfectly possible and great approach to certain use cases in which you want to implement input areas that automatically change, etc.

Ember.js already contains a presentation class for <input> elements, but <div> elements with contenteditable not set to true . The key point here is to bind to the div's HTML content and Ember.TextField value property, as is the case with Ember.TextField .

I talked about this on the blog, which can be found here: http://www.kaspertidemann.com/handling-contenteditable-in-ember-js-via-app-contenteditableview/

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

Hope this helps!

Answer 2

I would not use html5 contenteditable since, as you said, you are not talking to ember.

Check out this script to see how I will do this in ember. It does not have a coefficient of cool content content, but at least you know that it will work in all browsers.