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

中等编辑器.js

这就是我声明我的自定义绑定的方式，但问题是当我在编辑器中输入时，底层 observable 会更新。这是我在标记中使用它的方式。

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

这是我的虚拟机绑定到我的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。

4

1 回答 1

4

你访问 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();
        });
    }
};
于 2014-06-17T05:05:37.147 回答