Binding contentEditable div

2 posts, 0 answers
  1. Michael
    Michael avatar
    1 posts
    Member since:
    Apr 2013

    Posted 06 Jun 2013 Link to this post

    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).
  2. Alexander Valchev
    Alexander Valchev avatar
    2887 posts

    Posted 10 Jun 2013 Link to this post

    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:
    I hope this will help.

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top