2 way binding with "html" property?

[David A.]

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.

[Atanas Korchev]

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