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

时间:2014-02-21 04:41:17

标签: jquery-ui knockout.js knockout-sortable cleditor

首先:检查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,但是在该主题中所说的代码中找不到任何错误。

1 个答案:

答案 0 :(得分:4)

您提供的链接很有帮助。 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/