通过敲除排序对元素进行排序后，cleditor 的自定义绑定失败

Question

首先：检查this fiddle。

我有使用 Knockout 可排序库创建的可排序元素数组。当我最初应用绑定时，cleditor 初始化良好。

但是，当对可排序元素进行排序时，cleditor 无法重新初始化（我不确定会发生什么，但 cleditor 失败了）。 cleditor 在 Firefox 中只显示“true”而不是实际值，而在所有其他浏览器中什么也不显示。

我试图找出问题出在哪里，是在自定义绑定上，还是在 jQuery-UI 上，还是在 Knockout 可排序库上？

我的控制台没有收到任何错误。

ko.bindingHandlers.cleditor = {
        init: function(element, valueAccessor, allBindingsAccessor) {

            var modelValue = valueAccessor(),
                allBindings = allBindingsAccessor();

            var $editor = jQuery(element).cleditor({
                height: 50,
                controls: "bold italic underline | bullets numbering | undo redo"
            });

            $editor[0].change(function() {

                var elementValue = $editor[0].doc.body.innerHTML;
                if (ko.isWriteableObservable(modelValue)) {
                    modelValue(elementValue);

                } else {
                    if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers'].cleditor) {
                        allBindings['_ko_property_writers'].cleditor(elementValue);
                    }
                }
            });
        },

        update: function(element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor()) || '',
                $editor = jQuery(element).cleditor();

            if ($editor[0].doc.body.innerHTML !== value) {
                //$editor[0].doc.body.innerHTML = value;
                $editor[0].doc.body.innerHTML = value;
                $editor[0].focus();
            }
        }
    };

如何使 cleditor 工作，即使在元素排序之后？

我找到了this resource，但我在该主题中所说的代码中找不到任何错误。

Answer 1

您提供的链接很有帮助。 CLEditor refresh 方法是拖动后更新它的正确方法。它只需要在正确的时间完成，使用可排序的stop 事件。

stop: function(event, ui) {
    $(ui.item).find("textarea").cleditor()[0].refresh();
}

http://jsfiddle.net/mbest/rh8c2/1/

我还努力将其集成到您的 cleditor 绑定中。在init 函数中：

jQuery(document).on('sortstop', function(event, ui) {
    if (jQuery.contains(ui.item[0], element)) {
        jQuery(element).cleditor()[0].refresh();
    }
});

我还对update 函数进行了更改，以使<textarea> 值保持同步，因为refresh 会从<textarea> 更新编辑器的值：

$editor[0].updateTextArea();

http://jsfiddle.net/mbest/jw7Je/7/