Emulation von ng-Modell Zwei-Wege-Datenbindung in VanillaJS

Question

Ich bin es gewohnt, das AngularJS-Framework zu verwenden und stieß auf ein Hindernis bei der Verwendung von VanillaJS, das ziemlich einfach scheint, aber als ich online ging fand ich nur veraltete Praktiken.

Erstens muss ich in der Lage sein, ein <textarea> Element im Wesentlichen zu haben und seine Änderungen sofort in JS zu HTML zu propagieren. Zum Beispiel (in JS psuedocode):

<textarea id="#editor" when-changed="foo(newValue)"></textarea> 
<p id="#parsedEditor"></p> 

function foo(newValue) { 
    document.getElementByID("#parsedEditor") = bar(newValue); 
} 

function bar(text) { 
    return text.replace(" ", "x"); 
    }   

Was ich will, ist, wenn der Wert von textarea geändert wird, es durch einige Filter geleitet wird und dann wird es auf das Front-End gemacht.

In diesem Fall, wenn der Wert von #editor geändert wird, wird sein neuer Wert auf eine Callback-Funktion mit dem bar Filter foo und es wird analysiert gesendet und die #parsedEditor mit dem neuen Wert aktualisiert wird.

<textarea ng-model="text"></textarea> 
<p ng-bind-html="parsedText"></p> 

function controller($scope) { 
    $scope.$watch('text', function(newValue, oldValue) { 
      $scope.parsedText = newValue.replace(" ", "x"); 
    } 
} 

Ich suchte online nach Möglichkeiten, dies zu tun, und fand Object.observe() die nur ein neues vorgeschlagene Verfahren und .watch(), die nicht auf MDN empfohlen wurde: In AngularJS wäre es im Grunde seines (genaue Syntax und Best Practices abgesehen) . Außerdem ruft das Attribut onchange die Callback-Funktion nur dann auf, wenn das Element textarea deaktiviert ist, und ich möchte es propagieren, wenn sich der Wert nicht ändert, wenn die Auswahl aufgehoben wird.

Ich habe das Gefühl, dass es eine einfachere Möglichkeit gibt, dies in JS zu tun, die ich vermisse? Hier

Answer 1

ist der Arbeitscode basiert auf meinen Kommentar oben:

<textarea id="#editor" oninput="foo(event.currentTarget.value)"></textarea> 
<p id="#parsedEditor"></p> 

Ich gehe davon aus, dass Ihre Absicht, alle Räume mit einem x zu ersetzen war. Wenn ja, würden Sie wahrscheinlich einen regulären Ausdruck wollen:

function foo(newValue) { 
    document.getElementById("#parsedEditor").innerText = bar(newValue); 
} 

function bar(text) { 
    return text.replace(/\s/gi, "x"); 
} 

Sie müssten in allen Browsern testen Sie zielen und denken Sie daran, dass die HTML5-APIs funktionieren nicht immer wie in IE9 erwartet: http://caniuse.com/#search=input

Fiddle ist hier: https://jsfiddle.net/mcgraphix/71evt900/