JSFiddle - React, Tailwind, and code Playground

by fastfasterfastest

HTML

<script src="http://bestware.us/knockout/3.5.0-pre-20170505/knockout-latest.debug.js"></script>
<textarea class="form-control" rows="8" data-bind="textInput: modelValue"></textarea>

<div>
<button data-bind="click: inspectTextarea">Inspect textarea</button>
</div>

<ul data-bind="foreach: log">
   <li data-bind="text: $data"></li>
</ul>

JavaScript

function ViewModel() {
   var originalValue = "12345\r\n67890";
   
   this.modelValue = ko.observable("");
   this.log = ko.observableArray([ "originalValue - " + originalValue.length + " characters" ]);

   this.inspectTextarea = function(data, event){
       var element = event.target.ownerDocument.getElementsByTagName("textarea")[0];
   
   	this.log.push("modelValue " + this.modelValue.peek().length + " characters, element.value " + element.value.length + " characters");
   };   
   this.modelValue.subscribe(function(newValue){
      this.log.push("modelValue changed - now " + newValue.length + " characters");
   }, this);
   
   setTimeout(function(self) { self.modelValue(originalValue); }, 1000, this);
}

//ko.options.deferUpdates = true;
ko.onError = function (error) {
    alert("knockout error\n" + error);
};

ko.applyBindings(new ViewModel());