4

ノックアウトをfroala-editorにバインドするカスタム バインディングを作成しようとしています。

私のバインディングは次のように機能します。

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 さんのおかげで repro で jsfiddle を作ることができました。

4

2 に答える 2

2

行のせいで集中力を失っています$(element).editable("setHTML", value);。を使用var html = $(element).editable("getHTML")[0];すると、HTML を取得できますが、エディターから選択することはできません。更新で取得した値が以前の値と異なるかどうかをテストしても、選択が失われることはありません。http://jsfiddle.net/DVHzZ/16/

于 2014-04-27T17:45:08.657 に答える