Как связать видимый с редактируемым текстовым содержимым div?
Нокаут js → Привязать к редактируемому тексту div?
Ответ 1
Вам нужно будет изменить привязку "текст" по умолчанию, чтобы он мог записать содержимое отредактированного div обратно в наблюдаемое. Простой пользовательский обработчик привязки для этой задачи может выглядеть следующим образом:
ko.bindingHandlers.editableText = {
init: function(element, valueAccessor) {
$(element).on('blur', function() {
var observable = valueAccessor();
observable( $(this).text() );
});
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
$(element).text(value);
}
};
Но обратите внимание, что для этого примера кода требуется jQuery.
Использование так же просто:
<div contentEditable="true" data-bind="editableText: foo"></div>
Вот пример (написанный на CoffeeScript): http://jsfiddle.net/aBUEu/1/
Ответ 2
Вы не можете сделать это по умолчанию, потому что изменение текста в редактируемом div не приведет к возникновению какого-либо события, которое обновило бы значение в вашей модели.
Для этого вам понадобится специальная привязка. Вы можете прочитать об этом здесь: http://knockoutjs.com/documentation/custom-bindings.html