如何将可观察对象绑定到可编辑 DIV 的文本内容中?
如何将可观察对象绑定到可编辑 DIV 的文本内容中?
您需要修改默认的“text”绑定,以便它能够将编辑后的div内容写回observable。这个任务的简单自定义绑定处理程序可能如下所示:
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/
$(element).on('keypress', function() {
。 - Alvarokeypress
或keyup
之类的东西吗?我用这种方式得到了一些奇怪的行为,当我按键时,光标会被发送到div的开头。 - santiago ariztiif (!$(element).is(":focus")) { /* 更新该元素 */ }
- santiago arizti默认情况下无法实现此功能,因为在可编辑的div中更改文本不会触发任何事件来更新模型中的值。
你需要一个自定义绑定来实现这个功能。你可以在这里了解更多信息:http://knockoutjs.com/documentation/custom-bindings.html