我目前正在尝试实现自定义 KnockoutJS 绑定以使 div 内容可编辑。作为一个例子，我将使用第一个教程在 knockoutJS 中的 ViewModel，并添加一个“编辑模式”标志：
JSBin：http: //jsbin.com/ejugip/3/edit
视图模型代码：
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();
});
}
查看代码：
<fieldset id="HelloWorldView">
<legend>Hello World</legend>
<p><input type="checkbox" data-bind="checked: isInEditMode" /> edit mode</p>
<label>First name:</label>
<div data-bind="contenteditable: isInEditMode, text: firstName"></div>
<label>Last name:</label>
<div data-bind="contenteditable: isInEditMode, text: lastName"></div>
<label>Full name:</label>
<div data-bind="text: fullName"></div>
</fieldset>
到目前为止，这是我的绑定处理程序代码：
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);
}
};
现在，我只是将 contenteditable 属性添加到元素和一个 css 类。
所以进入和离开编辑模式工作正常。仍然缺少的一件事是，在编辑 contenteditable 元素后 viewModel 得到更新。
使视图模型与我的可编辑元素同步的最佳方法是什么？我需要一个自己的自定义“文本：”绑定，还是有更简单的方法？