2 way binding with "html" property?

2 posts, 1 answers
  1. David A.
    David A. avatar
    126 posts
    Member since:
    Aug 2008

    Posted 21 Jul 2013 Link to this post

    Hi,

    I am binding a div with the property "contentEditable"=true that is bound with data-bind="html: Message".  However, it appears to be a read only property since when I make changes to the div and then move off the div triggering the blur event, the Message property contains the original value.

    Am I doing something wrong or is this just the way it is designed?

    Thank you,
    David A.
  2. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 22 Jul 2013 Link to this post

    Hi David,

     Currently the html binding is one-way only. Fortunately it is easy to implement a custom binding which performs two-way binding.

     

    kendo.data.binders.contentEditable = kendo.data.Binder.extend({
      init: function(element, bindings, options) {
        kendo.data.Binder.fn.init.call(this, element, bindings, options);
         
        var that = this;
        var value = this.bindings.contentEditable.get();
         
        $(that.element).on("focusin", function() {
          value = that.bindings.contentEditable.get();
        }).on("focusout", function() {
            if (that.element.innerHTML != value) {
              that.bindings.contentEditable.set(that.element.innerHTML);
            }
        });
      },
     
      refresh: function() {
        this.element.innerHTML = this.bindings.contentEditable.get();
      }
    });


    Here is a runnable demo: http://jsbin.com/amigot/1/edit

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top