title: contenteditable binding for KnockoutJS
body: <p>I 'm currently trying to implement a custom KnockoutJS binding to make a div contenteditable. As an example, I'll take the ViewModel from the first tutorial at knockoutJS and add a "edit mode"-flag:</p>
  
  <p>JSBin: <a href="http://jsbin.com/ejugip/3/edit" rel="nofollow">http://jsbin.com/ejugip/3/edit</a></p>
  
  <p>ViewModel Code:</p>
  
  <pre><code>function HelloWorldViewModel() {
      var self = this;
      self.isInEditMode = ko.observable(true);
      self.firstName = ko.observable('Bert');
      self.lastName = ko.observable('Berntington');
      self.fullName = ko.computed(function () {
          return self.firstName() + ' ' + self.lastName();
      });
  }
  </code></pre>
  
  <p>View Code:</p>
  
  <pre><code>&lt;fieldset id="HelloWorldView"&gt;  
      &lt;legend&gt;Hello World&lt;/legend&gt;
      &lt;p&gt;&lt;input type="checkbox" data-bind="checked: isInEditMode" /&gt; edit mode&lt;/p&gt;
      &lt;label&gt;First name:&lt;/label&gt;
      &lt;div data-bind="contenteditable: isInEditMode, text: firstName"&gt;&lt;/div&gt;
      &lt;label&gt;Last name:&lt;/label&gt;
      &lt;div data-bind="contenteditable: isInEditMode, text: lastName"&gt;&lt;/div&gt;
      &lt;label&gt;Full name:&lt;/label&gt;
      &lt;div data-bind="text: fullName"&gt;&lt;/div&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>This is my binding handler code, so far:</p>
  
  <pre><code>function makeEditable(element, editable) {
      $(element).attr('contenteditable', (editable) ? true : false);
      $(element).removeClass('Editable');
      if (editable) {
          $(element).addClass('Editable');
      }
  }
  
  ko.bindingHandlers.contenteditable = {
      init: function (element, valueAccessor) {},
      update: function (element, valueAccessor) {
          var editable = ko.utils.unwrapObservable(valueAccessor());
          makeEditable(element, editable);
      }
  };
  </code></pre>
  
  <p>For now, I'm just adding the contenteditable attribute to the element and a css class. </p>
  
  <p>So entering and leaving the edit mode works fine. One thing that's still missing is, that the viewModel gets updated after the contenteditable elements are edited.</p>
  
  <p>What's the best way to get the viewmodel in sync with my editable elements? Do I need an own custom "text:" binding, or is there an easier way?</p>