버튼 막대를 사용할 때 PageDown 편집기가 녹아웃 값 업데이트를 트리거하지 않는 이유는 무엇입니까?

Question

사용자가 PageDown 단추 모음을 사용하여 편집기 텍스트를 변경할 때 녹아웃 모델을 업데이트하는 데 문제가 있습니다. 타이핑, 붙여 넣기 또는 커팅은 잘 작동하지만 버튼 막대 액션은 그렇지 않습니다.

나는 onPreviewRefresh에 hook을 추가하려고 시도했지만 편집인에게 결코 문제가되지 않습니다.

여기에 문제가있는 Fiddle이 있습니다. test을 편집기에 입력하면 test이 미리보기 섹션에 표시됩니다. 그러나 편집기에 test을 입력 한 다음 메뉴 모음을 사용하여 test을 굵게 표시하면 다른 문자를 입력 할 때까지 미리보기 섹션에이 업데이트가 표시되지 않습니다.

var ME = {}; 
ME.MarkdownConverter = Markdown.getSanitizingConverter(); 
ME.MarkdownCounter = 0; 

ko.bindingHandlers.markdownEditor = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     ++ME.MarkdownCounter; 
     // Create the elements needed for a new PageDown editor. 
     $(element).append($('<div id="wmd-button-bar-' + ME.MarkdownCounter + '" class="wmd-button-bar"></div>')); 
     $(element).append($('<textarea id="wmd-input-' + ME.MarkdownCounter + '" class="wmd-input"></textarea>')); 

     // Make sure the textarea is properly binded up so that the view model is updated. 
     var newBindings = { textInput: valueAccessor }; 
     ko.applyBindingAccessorsToNode($('#wmd-input-' + ME.MarkdownCounter)[0], newBindings, viewModel); 

     // Create the editor and apply to the new elements ensuring that we detect all 
     // changes from the wmd-button-bar. 
     var editor = new Markdown.Editor(ME.MarkdownConverter, "-" + ME.MarkdownCounter); 
     editor.hooks.chain("onPreviewRefresh", function() { 
      var value = valueAccessor(); 
      debugger; 
      value($('#wmd-input-' + ME.MarkdownCounter).val()); 
     }); 
     editor.run(); 

     return { controlsDescendantBindings: true }; 
    } 
}; 

Answer 1

값 업데이트가 값을 프로그래밍 방식으로 설정되어 있기 때문에 트리거되지 않습니다, 텍스트 영역의 변경 이벤트를 트리거하지 않습니다

이

내가 PageDown 키 편집기를 초기화하는 데 사용하고 있음을 바인딩 사용자 정의입니다.

미리보기 요소가 없으므로 onPreviewRefresh 이벤트가 트리거되지 않습니다. 해결 방법으로 당신은 그것을 요소를 추가하고 숨길 수 있습니다 : HTTP : /를

var ME = {}; 
ME.MarkdownConverter = Markdown.getSanitizingConverter(); 
ME.MarkdownCounter = 0; 

ko.bindingHandlers.markdownText = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     $(element).addClass('markdown-text'); 
    }, 
    update: function(element, valueAccessor, allBindings) { 
     var value = valueAccessor(); 
     var valueUnwrapped = ko.unwrap(value); 
     $(element).html(ME.MarkdownConverter.makeHtml(valueUnwrapped)); 
    } 
}; 

ko.bindingHandlers.markdownEditor = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     ++ME.MarkdownCounter; 
     // Create the elements needed for a new PageDown editor. 
     $(element).append($('<div id="wmd-button-bar-' + ME.MarkdownCounter + '" class="wmd-button-bar"></div>')); 
     $(element).append($('<textarea id="wmd-input-' + ME.MarkdownCounter + '" class="wmd-input"></textarea>'));   
     // if no preview element is found, onPreviewRefresh is not triggered 
     $(element).append('<div style="display: none" class="wmd-panel wmd-preview" id="wmd-preview-' + ME.MarkdownCounter + '"></div>'); 

     var $input = $('#wmd-input-' + ME.MarkdownCounter); 

     // Make sure the textarea is properly binded up so that the view model is updated. 
     var newBindings = { textInput: valueAccessor }; 
     ko.applyBindingAccessorsToNode($input[0], newBindings, viewModel); 

     // Create the editor and apply to the new elements ensuring that we detect all 
     // changes from the wmd-button-bar. 
     var editor = new Markdown.Editor(ME.MarkdownConverter, "-" + ME.MarkdownCounter); 
     editor.hooks.chain("onPreviewRefresh", function() { 
      $input.change(); 
     }); 
     editor.run(); 

     return { controlsDescendantBindings: true }; 
    } 
}; 

var vm = { noteText: ko.observable('') }; 
ko.applyBindings(vm); 

버튼 이벤트를 클릭하고이 업데이 트를 할 당신은`.wmd-button`에 가입 할 수있는 해결 방법으로 http://jsfiddle.net/vaako62z/3/