하여 여러개의 콘텐츠 편집 녹아웃

Question

나는 많은 편집 가능한 영역이 포함 된 문자열을 보내고 있습니다

를 사용하여 문자열 내에서 바인딩,

var str = "Regular ... are patterns used to match character .... in strings. In ..., regular expressions are also objects." 

편집 가능한 영역이 포함되어있는이 문자열을 고려하시기 바랍니다 ('...'), 내가 만들고 싶어 편집 가능한 장소. 내가 그 문자열 안에 편집 가능한 내용을 삽입하고 싶다는 것을 의미합니다. 나는이 목적을 위해 녹아웃을 사용하고 싶다. 녹아웃을 사용하여 편집 가능한 내용에 대한 niemeyer의 내용을 언급했습니다. 아무도 나를이 더 나은 방법을 제안 할 수 있습니다. 이 내 코드 here

  ko.bindingHandlers.editableContent = { 
     init: function(element, valueAccessor, allBindingsAccessor) { 

      $(element).css({ "background-color": "#ff77ee", "margin-left": "-2px", "letter-spacing": "0.05"}); 

      ko.utils.registerEventHandler(element, "keyup", function() { 
       var modelValue = valueAccessor(); 
       var elementValue = element.innerHTML; 
       if (ko.isWriteableObservable(modelValue)) { 
        modelValue(elementValue); 
       } 
       else { //handle non-observable one-way binding 
        var allBindings = allBindingsAccessor(); 
        if (allBindings['_ko_property_writers'] && allBindings['_ko_property_writers'].editableContent) allBindings['_ko_property_writers'].editableContent(elementValue); 
       } 
      }) 
     }, 
     update: function(element, valueAccessor) { 
      var value = ko.utils.unwrapObservable(valueAccessor()) || ""; 
      element.innerHTML = value; 
     } 
    }; 




    ko.bindingHandlers.myBinding = { 
     init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 

      var div = document.createElement("div"); 
      var fulltext = valueAccessor(); 

      element.appendChild(div); 

      div.innerHTML = fulltext().replace(/\.\.\./g, "<span data-bind = 'editableContent : editedText' contenteditable='true'></span>"); 

      ko.applyBindings(viewModel,div); 


     }, 

     update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 

     } 
    }; 

    $(document).ready(function() { 

     var viewModel = function() { 
      var self = this; 
      self.fullText = ko.observable('Regular ... are patterns used to match character .... in strings. In ..., regular expressions are also objects.'); 
      self.editedText = ko.observable('...'); 

     } 

     ko.applyBindings(new viewModel()); 

    }); 

Answer 1

주요 문제는 각 editableContent가 관찰 동일한에 대해 바인딩 바인딩, 그래서 그들은 서로를 업데이트하는 것입니다.

텍스트를 여러 조각으로 나누고 각 contenteditable에 개별 관찰 물을 추가하는 빠른 시도입니다. 여기

ko.bindingHandlers.myBinding = { 
     init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      var div = document.createElement("div"), 
       fulltext = valueAccessor(), 
       split = fulltext().split(/\.\.\./g), 
       span, editable, editableSpan, pieces = []; 

      element.appendChild(div); 

      //loop through each pieces and add text and editable content 
      for (var i = 0, j = split.length; i < j; i++) { 
       //create a span for the fixed content 
       span = document.createElement("span"); 
       span.innerHTML = split[i]; 

       //keep track of each piece, so we can later put them back together to update original 
       pieces.push(split[i]); 
       div.appendChild(span); 

       //add editable content between the pieces, except at the end 
       if (i < split.length - 1) { 
       editable = ko.observable("..."); 
       editableSpan = document.createElement("span"); 
       pieces.push(editable); 
       div.appendChild(editableSpan); 
       ko.applyBindingsToNode(editableSpan, { editableContent: editable }); 
       } 

      } 

      //update the original observable with the current value 
      ko.computed({ 
       read: function() { 
        var result = ""; 
        ko.utils.arrayForEach(pieces, function(piece) { 
         result += ko.utils.unwrapObservable(piece); 
        }); 

        valueAccessor()(result); 
       }, 
       disposeWhenNodeIsRemoved: element 
      }); 

      return { controlsDescendantBindings: true }; 
     } 
    }; 

샘플 :이 편집에 따라 원래의 관찰을 갱신 처리하지만, 다른 방법으로 원래의 관찰을 업데이트 한 경우, 내용 편집 가능한 블록을 업데이트 처리 할 것이라고 http://jsfiddle.net/rniemeyer/8CkLn/

참고.