KnockoutJS 的 contenteditable 绑定

Question

我目前正在尝试实现自定义 KnockoutJS 绑定以使 div 内容可编辑。作为示例，我将采用第一个教程中的 ViewModel 在 knockoutJS 并添加一个“编辑模式”-flag：

JSBin：http://jsbin.com/ejugip/3/edit

ViewModel 代码：

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 会得到更新。

让视图模型与我的可编辑元素同步的最佳方式是什么？我需要自己的自定义“文本：”绑定，还是有更简单的方法？

Answer 1

前段时间，我创建了一个基于 KO 的 contenteditable binding plus 编辑器，您或许可以从中获得一些灵感。

https://github.com/madcapnmckay/Knockout-UI/blob/master/js/ui-editor.js

希望这会有所帮助。