تحديث قيمة الضربة القاضية لا يعمل مع Pagedown؟

Question

عندي من وجهة نظري ما يلي:

<textarea data-bind="value: content, valueUpdate: 'afterkeydown'"></textarea>

والذي عند الكتابة يتصرف كما أتوقع.لكنني أستخدم محرر WMD/Pagedown للنقر فوق زر يضيف محتوى إلى الحقل، تمامًا مثل مربع محتويات منشور StackOverflow عندما تقوم بإنشاء/تحديث منشور.

إذا قمت فقط بالنقر فوق زر (لإضافة علامات نجمية أو أقواس وما إلى ذلك) ولم أكتب أي شيء، فلن يتم تحديث القيمة أبدًا في content يمكن ملاحظتها.

لدي save الزر الذي يمكنني استخدامه لتشغيل "المزامنة" قبل حفظ البيانات عن طريق تحديد عناصر الإدخال المراد تحديثها، لكن ليس لدي أي فكرة عما إذا كان ذلك ممكنًا.ما هي الطريقة الصحيحة للتعامل مع هذا الوضع؟

تحديث:Jsfiddle لعرض المشكلة: http://jsfiddle.net/BcuLq/

التحديث 2: يحدث هذا السلوك أيضًا مع منتقي التاريخ والوقت الذي أستخدمه لملء الإدخال بسلسلة.سيكون أي حل عام يمكنني تطبيقه على جميع المدخلات المملوءة برمجيًا مثاليًا، على الرغم من أنني لست متأكدًا مما إذا كانت هذه طريقة معقولة للقيام بذلك.

Answer 1

هذه حالة استخدام حقيقية لاستخدام ملف ملزمة مخصصة.لقد قمت بتطبيق TinyMCE ضد ملف <textarea> بنجاح مع هذه الطريقة.

المشكلة التي تلاحظها هي أن عمليات التلاعب التي تجريها عن طريق النقر على الأزرار الموجودة على شريط الأدوات تؤدي إلى رفع الأحداث على Markdown.Editor الذي يغير قيمة الأساسية <textarea> بدون ال change يتم إطلاق الحدث، والذي تعتمد عليه Knockout بالطبع لإخطار المشتركين فيه.

يطبق الحل الخاص بي ربطًا مخصصًا للتأكد من أن الأحداث التي أثارها محرر wysiwyg تنعكس في نموذج العرض.على وجه التحديد، للتأكد من أن القيمة محدثة دائمًا بالإضافة إلى الحفاظ على قيمة dirty العلم في نموذج العرض.نظرًا لأنني لست على دراية بالمكون الإضافي Markdown، فقد قمت بتضمين عينة مأخوذة من حل TinyMCE الخاص بي.سيكون المبدأ هو نفسه تمامًا، حيث ستحتاج فقط إلى تطبيق تفاصيل محرر Markdown.

ko.bindingHandlers.wysiwyg = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).tinymce({
            /*** other options excluded for brevity ***/
            setup: function(editor) {
                editor.on('change', function() {
                    valueAccessor()(editor.getContent());
                    viewModel.isDirty = editor.isDirty();
                });
            }
        });
    },
    update: function(element, valueAccessor) {
            $(element).text(valueAccessor()());
    }
};

وأخيرا يمكن الآن تنفيذ الربط الخاص بك على النحو التالي؛

<textarea data-bind="value: content, wysiwyg: content"></textarea>

تحديث

منذ القراءة على PageDown، إليك الرابط المخصص المأخوذ من شوكة ملفك JSFiddle

ko.bindingHandlers.wysiwyg = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        editor.hooks.chain("onPreviewRefresh", function () {
            $(element).change();
        });
        editor.run();
    }
};