KnockoutJS: Writable вычисляемый наблюдаемый, не обновляющийся

Question

У меня есть следующий код, где я пытаюсь использовать записываемый для просмотра наблюдаемый для проверки ввода пользователя и автоматического отклонения недопустимого ввода. Это всего лишь некоторый тестовый код, где я пытаюсь запретить пользователю удалять символ запятой из текста. Если пользователь удаляет запятую, я пытаюсь перефразировать редактор до предыдущего значения, чтобы перезаписать последнее изменение. Возможно ли это, используя записываемое вычисленное поле? Проблема, с которой я сталкиваюсь, заключается в том, что перезаписываемая вычисленная привязка срабатывает только при загрузке страницы (после ручной установки подсказки ValidText). Однако я не могу ее запустить, когда пользователь вводит в редактор.

Код:

<script type="text/javascript"> 

    var model = null; 

    function EditModel() { 

     this.Count = 2; 

     var self = this; 

     this.ExistingValue = ko.observable(""); 

     this.ValidText = ko.computed({ 
      read: function() { 
       return self.ExistingValue(); 
      }, 
      write: function (text) { 
       if (text.split(',').length === self.Count) { 
        self.ExistingValue(text); 
       } 
      }, 
      owner: self 
     }); 
    } 

    $(document).ready(function() { 

     model = new EditModel(); 

     model.ValidText('@(Model.Text)'); 

     ko.applyBindings(model); 
    }); 

</script> 

<div id="mainContainer"> 
    <div id="editor" contenteditable="true" class="commentEditBox" data-bind="text: ValidText, valueUpdate: 'afterkeydown'" ></div> 
</div> 

Законченное происходит с пользовательской привязки идеи и превращали код на следующее:

<script type="text/javascript"> 

    var model = null; 

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

      $(element).on('keydown', function() { 
       var observable = valueAccessor(); 
       observable($(this).text()); 
      }); 
     }, 
     update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
      var text = ko.utils.unwrapObservable(valueAccessor()); 

      if (text.split(',').length === model.Count) { 
       model.ValidText(text); 
       model.PreviousText = text; 
       $(element).text(text); 
      } 
      else { 
       model.ValidText(model.PreviousText); 
       $(element).text(model.PreviousText); 
      } 
     } 
    }; 

    function EditModel() { 

     var self = this; 

     self.Count = 2; 

     self.ValidText = ko.observable(""); 

     self.PreviousText = null; 
    } 

    $(document).ready(function() { 

     model = new EditModel(); 

     model.ValidText('This is,a test'); 

     ko.applyBindings(model); 
    }); 

</script> 

<div id="mainContainer"> 
    <div id="editor" contenteditable="true" class="commentEditBox" data-bind="customEditorBinding:ValidText" ></div> 
</div> 

Answer 1

Хорошо, путая использование себя, и это друг от друга, у Вас есть оценка его в div, используя текст, и вы пытаетесь его обновить при изменении значения. В этом html-элементе нет значения, поэтому он не стреляет.

Посмотрите на custom binding и переместите вашу логику записи в метод обновления.

ko.bindingHandlers.yourBindingName = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     // This will be called when the binding is first applied to an element 
     // Set up any initial state, event handlers, etc. here 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     // This will be called once when the binding is first applied to an element, 
     // and again whenever the associated observable changes value. 
     // Update the DOM element based on the supplied values here. 
    } 
}; 

Answer 2

В вашем методе записи, добавить этот пункт еще:

else { self.ValidText.notifySubscribers(self.ExistingValue()); } 

Это заставит текстовое поле для обновления обратно к исходному значению.