淘汰赛内容可编辑自定义绑定答案

【问题标题】：Knockout content editable custom binding淘汰赛内容可编辑自定义绑定
【发布时间】：2011-12-15 19:31:10
【问题描述】：

为什么在这个例子中http://jsfiddle.net/JksKx/8/ div 在我写文本时丢失了光标？如何解决这种行为？

【问题讨论】：

标签： javascript knockout.js contenteditable

【解决方案1】：

keyup 事件正在触发并写入您的视图模型，然后触发自定义绑定的更新功能。这是将 innerHTML 写回元素，这会导致您失去焦点。

一个简单的解决方法是检查更新函数是否 element.innerHTML 已经与您要设置的值相同。

ko.bindingHandlers.htmlValue = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        ko.utils.registerEventHandler(element, "keydown", function() {
            var modelValue = valueAccessor();
            var elementValue = element.innerHTML;
            if (ko.isWriteableObservable(modelValue)) {
                modelValue(elementValue);
            }
            else { //handle non-observable one-way binding
                var allBindings = allBindingsAccessor();
                if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers'].htmlValue) allBindings['_ko_property_writers'].htmlValue(elementValue);
            }
        }
                                     )
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()) || "";
        if (element.innerHTML !== value) {
            element.innerHTML = value;
        }
    }
};

【讨论】：

我注意到这个 contenteditable 绑定的两件事： 1. 确保 data-bind 不在具有 contenteditable 属性的元素内。具有 contenteditable 的元素不会触发关键事件。 2. 如果用户右键单击元素并粘贴文本，这将不会更新值。点击事件也应该被分配。此外，如果使用像“粗体”点击事件这样的按钮应该绑定到正文或类似的东西。
使用焦点似乎适用于“粗体”点击事件和其他类似事件。 ko.utils.registerEventHandler(element, "focus", updateHandler);

【解决方案2】：

可能想将 keydown 更改为 keyup，但除此之外效果很好 =)

ko.utils.registerEventHandler(element, "keyup", function() {

【讨论】：