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/

通过淘汰可排序对元素进行排序后，自定义绑定的cleditor失败

1 个答案: