녹아웃 valueUpdate가 Pagedown과 작동하지 않습니까?

Question

내 생각에는 다음과 같습니다.

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

입력할 때 예상대로 작동합니다.하지만 저는 게시물을 생성/업데이트할 때 StackOverflow의 게시물 콘텐츠 상자와 마찬가지로 필드에 콘텐츠를 추가하는 버튼을 클릭하기 위해 WMD/Pagedown 편집기를 사용하고 있습니다.

별표나 괄호 등을 추가하기 위해 버튼만 클릭하고 아무 것도 입력하지 않으면 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();
    }
};