Binding contentEditable div

[Michael]

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).

[Alexander Valchev]

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