Я написал специальный обработчик привязки, который переключает, является ли элемент 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
- Позиция курсора в элементе возвращается к началу
A jsfiddle говорит тысячу слов... http://jsfiddle.net/93eEr/1/
Я немного озадачен тем, как именно с этим справиться.