Giá trị KnockoutCập nhật để làm việc với các phần tử div có thể chỉnh sửa

Question

Tôi đang sử dụng trình soạn thảo wysiwyg bootstrap để thay thế vùng văn bản đang được databinded thành giá trị quan sát được từ viewModel.

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

Văn bản trên cập nhật chế độ xem tương ứngMỗi giá trị mỗi lần nhấn được nhấn từ bên trong vùng văn bản.

Bây giờ vùng văn bản được thay thế bởi wysiwyg editor bootstrap

<div class="editor" data-bind="html:data, valueUpdate:'afterkeydown'"></div> 

Bây giờ các quan sát không được cập nhật trên KeyDown.

bất kỳ ý tưởng nào về cách thực hiện công việc này?

Tạo trình gắn thẻ tùy chỉnh "htmlUpdate" cho thẻ div, tương tự như valueUpdate đang hoạt động với các yếu tố đầu vào?

cũng phải hỗ trợ HTML nội tuyến, Bất kỳ ý tưởng nào về cách sử dụng lại "valueUpdate" để làm việc với các phần tử div?

Đây là fiddle http://jsfiddle.net/cHTCq/

Answer 1

Đây là một đơn giản ràng buộc để làm việc với một contentEditable div như thế và có nó cập nhật khi bạn gõ cũng như khi bạn nhấp vào nút định dạng:

ko.bindingHandlers.htmlValue = { 
    init: function(element, valueAccessor, allBindingsAccessor) { 
     var updateHandler = function() { 
      var modelValue = valueAccessor(), 
       elementValue = element.innerHTML; 

      //update the value on keyup 
      modelValue(elementValue); 
     }; 

     ko.utils.registerEventHandler(element, "keyup", updateHandler); 
     ko.utils.registerEventHandler(element, "input", updateHandler); 
    }, 
    update: function(element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()) || "", 
      current = element.innerHTML; 

     if (value !== current) { 
      element.innerHTML = value;  
     } 
    } 
}; 

Dưới đây là fiddle của bạn được cập nhật để sử dụng nó: http://jsfiddle.net/rniemeyer/hp3K6/