This is a migrated thread and some comments may be shown as answers.

Binding contentEditable div

1 Answer 343 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 06 Jun 2013, 05:05 PM
I have some divs in my page that have the contentEditable attribute.  How can I update the viewmodel when the user changes the text of any of these editable divs.

For example:

<div data-bind="text: viewModel.Person.FirstName" contentEditable="true">John</div>

Assume a user edits the name and changes it to Jack.  In an event handler, I need to set viewModel.Person.FirstName to "Jack" (the innerHtml of the element is now "Jack"), and I need to fire a change event on the viewmodel so that any other elements on the page that refer to viewModel.Person.FirstName are updated.

Seems I can't use this.bindinds["text"] because that is valid in the viewmodel itself, not in an event handler for the element.

I could parse the data-bind attribute and get the value of it's "text" binding, but that seems kind of silly.

This is probably simple, but being new to this stuff I'm kind of flummoxed.

Thanks for any help :o).

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 10 Jun 2013, 10:51 AM
Hi Michael,

I suggest you to use a custom MVVM binding for this case. Value binding listens for the change event of the input, since the contentEditable element does not have a change event you may update the ViewModel on blur.

Please check the following example: http://jsbin.com/ucohol/4/edit
I hope this will help.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Michael
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or