Ember和HTML5内容资源 [英] Ember and HTML5 contenteditable property

问题描述

我刚刚发现了 contenteditable 规格在HTML5。基本上，它允许任何html元素可以编辑，当您点击它，只需将该属性设置为true。例如：

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.

不幸的是，这并不通知Ember关于Ember对象的更改，所以Ember不知道该值已被更改。

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.

推荐答案

相反，使用 contenteditable 是完全可能的，并且是您希望实现的某些用例的一种很好的方法自动调整大小的输入区域等。

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已经包含< input> 元素的视图类，但是对于< div> 元素， contenteditable 设置为 true 。这里的关键是绑定到div的HTML内容，并公开一个值属性就像 Ember.TextField 具有

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.

我已经在一篇博客文章中介绍过，可以在这里找到： http://www.kaspertidemann.com/handling-contenteditable-in-ember-js-via-app-contenteditableview/

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/

博客文章归结为引入 App.ContenteditableView ，其源头可以在这里找到： https://github.com/KasperTidemann/ember-contenteditable-view

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

我希望这有帮助！

这篇关于Ember和HTML5内容资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！