Mutiple Содержание редактируемые связывания внутри строки с помощью нокаута

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 связывание связано с тем же различимы, они обновляют друг друга.

Вот краткая попытка разбить текст на куски и добавить отдельные наблюдаемые для каждого отдельного контента.

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/

Обратите внимание, что это обрабатывает обновление оригинальной наблюдаемым на основе редактирования, но не будет обрабатывать обновления содержимого редактируемых блоков, если вы обновили оригинальный наблюдаемым по-другому.