Question

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

            var initialValue = ko.unwrap(valueAccessor);
            var options = allBindingsAccessor().editoroptions || {};
            var editorElement = '#' + $(element).attr('id');

            $(editorElement).html(initialValue);

            ko.utils.registerEventHandler(element, "keyup", function () {
                var newvalue = $(editorElement).html().toString()
                valueAccessor(newvalue);
            });

            $(editorElement).on('input', function () {
                $(element).trigger("keyup");
            });

            var editor = new MediumEditor(editorElement, {
                buttons: ['bold', 'italic', 'underline', 'quote', 'anchor', 'superscript', 'subscript', 'orderedlist', 'unorderedlist', 'pre', 'outdent', 'indent'],
                buttonLabels: 'fontawesome',
                placeholder: options.initialText
            });

            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                editor.deactivate();
            });
        }
    };

medium-editor.js

这就是我如何声明我的自定义绑定，但是当我在编辑器中输入时，问题是基础可观察的更新。这是我在标记中如何使用它。

    <div class="editor" id="ruleseditor" data-bind="editor: RuleText(), editoroptions:{initialText: 'No rules defined please enter new rules for application'}"></div>

这是我的VM绑定到我的HTML。

define(["require", "exports", 'knockout'], function(require, exports, ko) {
var rules = (function () {
    function rules() {
        var _this = this;
        this.IsLoading = ko.observable();
        this.RuleText = ko.observable("thet with some optiona markup <h3> displayd in cool editor<?h3>");
        this.RuleText.subscribe(function (newvalue) {
            console.log("new value for rule ....... ", newvalue);
        });
        this.RuleOriginal = ko.computed(function () {
            return _this.RuleText();
        });
        this.activate = this._activateCallback;
    }
    rules.prototype._activateCallback = function () {
        this._getAppRules();
    };

    rules.prototype._getAppRules = function () {
    };
    return rules;
})();

return rules;
});

初始自定义绑定按预期工作，因为我可以看到激活编辑器脚本并将值传递给编辑器我的问题是我在编辑器中更新我的html后无法更新我的observable。

Answer 1

您访问valueAccessor的方式是错误的，这不是您的想法。请阅读http://knockoutjs.com/documentation/custom-bindings.html

中的valueAccessor

尝试：

（1）将您的绑定从editor: RuleText()更改为editor: RuleText，因为RuleText 您想要的可观察，而不是下面的值。

（2）修复绑定处理程序

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

        // you have to call valueAccessor() to get back the observable you passed in your binding.
        var value = valueAccessor(); 
        var options = allBindingsAccessor().editoroptions || {};
        var editorElement = '#' + $(element).attr('id');

        // unwrap observable value
        $(editorElement).html(ko.unwrap(value)); 

        ko.utils.registerEventHandler(element, "keyup", function () {
            var newvalue = $(editorElement).html().toString();

            // 'value' (not valueAccessor) is the observable you passed in.
            value(newvalue);
        });

        $(editorElement).on('input', function () {
            $(element).trigger("keyup");
        });

        var editor = new MediumEditor(editorElement, {
            buttons: ['bold', 'italic', 'underline', 'quote', 'anchor', 'superscript', 'subscript', 'orderedlist', 'unorderedlist', 'pre', 'outdent', 'indent'],
            buttonLabels: 'fontawesome',
            placeholder: options.initialText
        });

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            editor.deactivate();
        });
    }
};

中编辑器自定义绑定

1 个答案: