knockout contentEditable binding

Question

Я написал специальный обработчик привязки, который переключает, является ли элемент contentEditable. Я также хочу, чтобы любые привязки html обновлялись при редактировании содержимого элемента, поэтому он прослушивает входные события и обновляет привязки html, если они доступны.

ko.bindingHandlers.contentEditable = { 
    update: function (element, valueAccessor, allBindingsAccessor) { 
     var value = ko.unwrap(valueAccessor()); 
     element.contentEditable = value; 

     var $element = $(element); 

     if (value) { 
      var allBindings = allBindingsAccessor(); 
      var htmlBinding = allBindings.html; 

      if (ko.isWriteableObservable(htmlBinding)) { 
       $element.on("input", function (event) { 
        htmlBinding(element.innerHTML); 
       }); 
      } 
     } else { 
      $element.off("input"); 
     } 
    } 
}; 

Однако здесь проблема:

• пользователь вводит что-то в элемент
• входного срабатывает событие
• HTML, связывание обновляется
• innerHTML элемента обновляется
• Позиция курсора в элементе возвращается к началу

jsfiddle говорит тысячу слов ... http://jsfiddle.net/93eEr/1/

Я немного озадачен, как именно, чтобы справиться с этим.

Answer 1

ko.bindingHandlers.htmlLazy = { 
 
    update: function (element, valueAccessor) { 
 
     var value = ko.unwrap(valueAccessor()); 
 
     
 
     if (!element.isContentEditable) { 
 
      element.innerHTML = value; 
 
     } 
 
    } 
 
}; 
 
ko.bindingHandlers.contentEditable = { 
 
    init: function (element, valueAccessor, allBindingsAccessor) { 
 
     var value = ko.unwrap(valueAccessor()), 
 
      htmlLazy = allBindingsAccessor().htmlLazy; 
 
     
 
     $(element).on("input", function() { 
 
      if (this.isContentEditable && ko.isWriteableObservable(htmlLazy)) { 
 
       htmlLazy(this.innerHTML); 
 
      } 
 
     }); 
 
    }, 
 
    update: function (element, valueAccessor) { 
 
     var value = ko.unwrap(valueAccessor()); 
 
     
 
     element.contentEditable = value; 
 
     
 
     if (!element.isContentEditable) { 
 
      $(element).trigger("input"); 
 
     } 
 
    } 
 
}; 
 

 
var viewModel = { 
 
    editable: ko.observable(false), 
 
    content: ko.observable("<i>This</i> is the initial content!") 
 
}; 
 

 
ko.applyBindings(viewModel);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<label>Editable: <input type="checkbox" data-bind="checked: editable"/></label> 
 
<hr> 
 
<div data-bind="contentEditable: editable, htmlLazy: content"></div> 
 
<hr> 
 
<pre data-bind="text: content"></pre>

сделать трюк с минимальными изменениями. См. http://jsfiddle.net/93eEr/3/

Вы можете назвать обработчик привязки htmlEditable, может быть, это лучше, чем называть его «ленивым». Вам решать.

Обратите внимание, что событие «ввода» не обязательно должно быть развязано каждый раз. Он не будет срабатывать, когда элемент не будет удовлетворительным.

Answer 2

@ Ответ Томалака является совершенным, поэтому мой подъем.

Но для тех, кто прибывает сюда, как и я:

• ищет один-и-сделано пользовательские привязки
• , что предполагает, что содержание всегда редактируемые
• нормально с value: -esque обновления (например: на размытость)

Я предлагаю следующее:

ko.bindingHandlers.contentEditable = { 
    init: function(element, valueAccessor) { 
     var value = valueAccessor(); 

     function onBlur(){ 
      if (ko.isWriteableObservable(value)) { 
       value(this.innerHTML); 
      } 
     };     

     element.innerHTML = value(); //set initial value 
     element.contentEditable = true; //mark contentEditable true 
     element.addEventListener('blur', onBlur); //add blur listener 
    } 
};