knockout.js - froala 的自定义 knockout 绑定(bind)使编辑失去焦点

Question

我正在尝试编写一个自定义绑定(bind)来将 knockout 绑定(bind)到 froala-editor .

我的绑定(bind)按以下方式工作:

ko.bindingHandlers.froala = {
    init: function(element, valueAccessor){
        var options = {
            inlineMode: false,
            alwaysBlank: true,
            buttons : ["bold", "italic", "createLink"],
            autosaveInterval: 10,
            contentChangedCallback: function () {
                var html = $(element).editable("getHTML"),
                    observable  = valueAccessor();
                observable( html );
            }
        };
        $(element).editable(options);

        // handle disposal (if KO removed by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).editable("destroy");
        });
    },
    update: function(element, valueAccessor){
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).editable("setHTML", value);
    }
}

这里我使用autosaveInterval ，因为我找不到更合适的方法。

我的 HTML 非常简单:

<div data-bind="froala: txt"></div>

对应的JS:

function test() {
    this.txt = ko.observable('Hello');
}

var a = new test();
ko.applyBindings(a);

一切正常，但唯一的问题是，在每次 autosaveInterval 时间之后，我的编辑器的焦点就会丢失。经过调查，我发现 observable( html ); 是罪魁祸首。如果我将其注释掉，焦点不会丢失，但是我的模型不同步是可以理解的。

有人可以尝试帮助我吗？

感谢@nemesv，我能够制作一个 jsfiddle with a repro .

Answer 1

由于 $(element).editable("setHTML", value); 行，您失去了焦点。当您使用var html = $(element).editable("getHTML")[0];时您将获得 HTML，但它不会为您提供编辑器中的选择。测试您在更新中获得的值是否与前一个值不同，将不再失去选择。 http://jsfiddle.net/DVHzZ/16/