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

2 way binding with "html" property?

1 Answer 58 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
David A.
Top achievements
Rank 1
David A. asked on 21 Jul 2013, 11:04 PM
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.

1 Answer, 1 is accepted

Sort by
0
Accepted
Atanas Korchev
Telerik team
answered on 22 Jul 2013, 08:31 AM
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!
Tags
MVVM
Asked by
David A.
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Share this question
or