ACE编辑器与knockoutJS绑定foreach

时间:2013-01-14 06:11:07

标签: knockout.js

- >我想将Ace JavaScript编辑器集成到KnockoutJS中。

- >不幸的是,似乎我已经达到了我对Javascript的限制所以我在这里转向JavaScript Sith Masters。

- > HTML是div,带有“id =”编辑器“data-bind =”ace:Value“。

- > Value是viewModel中textEditor的实际值。

Ace的自定义绑定处理程序的开始:

ko.bindingHandlers.ace = {
        init: function (element, valueAccessor) {
            var editor = ace.edit(element.id);
            var eitorValue = valueAccessor();

            editor.setTheme("ace/theme/textmate");
            editor.getSession().setMode("ace/mode/html");

            //handle edits made in the editor
            editor.getSession().on('change', function (e) {
                if (ko.isWriteableObservable(eitorValue)) {
                    eitorValue(editor.getValue());

                }
            });
        },
        update: function (element, valueAccessor) {


        }
    }

});

- >它仅在第一次加载时才起作用,而不是在编辑时将值分配给 - >编辑器。

- >对于参考,我试图实现像所示的tinyMce

ko.bindingHandlers.tinymce = {
    init: function(element, valueAccessor, allBindingsAccessor, context) {
        var options = allBindingsAccessor().tinymceOptions || {};
        var modelValue = valueAccessor();

        //handle edits made in the editor
        options.setup = function(ed) {
            ed.onChange.add(function(ed, l) {
                if (ko.isWriteableObservable(modelValue)) {
                   modelValue(l.content);   
                }
            });
        };

        //handle destroying an editor (based on what jQuery plugin does)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).parent().find("span.mceEditor,div.mceEditor").each(function(i, node) {
                var ed = tinyMCE.get(node.id.replace(/_parent$/, ""));
                if (ed) {
                    ed.remove();
                }
            });
        });   


        $(element).tinymce(options);

    },
    update: function(element, valueAccessor, allBindingsAccessor, context) {
        //handle programmatic updates to the observable
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).html(value);
    }

0 个答案:

没有答案