通过敲除可排序对元素进行排序后，对cleditor的自定义绑定失败 [英] Custom binding for cleditor fails after sorting elements through knockout sortable

问题描述

首先，请检查此小提琴.

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

I have sortable array of elements created with the Knockout sortable library. When I initially apply the binding the cleditor initializes fine.

但是，当对可排序元素进行排序时，分类器无法重新初始化(我不确定会发生什么，但是分类器会失败).该提示器在Firefox中仅显示"true"而不是实际值，而在所有其他浏览器中均不显示任何值.

However, when sortable elements are sorted, the cleditor fails to re-initialize (I'm not sure what happens but cleditor fails). The cleditor just displays "true" instead of actual value in Firefox, and nothing in all other browsers.

我想弄清楚问题出在哪里，无论是在自定义绑定，jQuery-UI还是Knockout可排序库上?

I'm trying to figure out where the problem is, whether it is on the custom binding, or jQuery-UI, or the Knockout sortable library?

我在控制台中没有收到任何错误.

I am not recieving any errors in my console.

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();
            }
        }
    };

即使元素已排序，我如何也可以使助手工作?

How can I make the cleditor to work, even after the elements are sorted?

我找到了此资源，但是我找不到如该主题中所述，在代码中发现任何错误.

I found this resource, but I couldn't find anything wrong in code as said in that topic.

推荐答案

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

The link you provided was helpful. The CLEditor refresh method is the right way to update it after it's dragged. It just needs to be done at the correct time, using the sortable stop event.

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

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

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

I also worked to integrate this into your cleditor binding. In the init function:

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

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

I also made a change in the update function to keep the <textarea> value in sync, because refresh updates the editor's value from the <textarea>:

$editor[0].updateTextArea();

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

这篇关于通过敲除可排序对元素进行排序后，对cleditor的自定义绑定失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！