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

medium-editor.js

これは私がカスタムバインディングを宣言した方法ですが、問題は、エディタに入力したときに監視対象が更新されることです。これがマークアップでの使用方法です。

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

これが私のhtmlにバインドされた私のVMです。

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を更新した後、オブザーバブルを更新できないという問題があります。

4

1 に答える 1

4

valueAccessor にアクセスする方法が間違っています。それはあなたの考えではありません。http://knockoutjs.com/documentation/custom-bindings.htmlの valueAccessor についてお読みください。

試す：

（1）バインディングをeditor: RuleText()下の値ではなく、必要なeditor: RuleTextオブザーバブルに変更します。RuleText

(2) バインディング Handler を修正する

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 に答える