VanillaJSでngモデル双方向データバインディングをエミュレートする

Question

私はAngularJSフレームワークの使用に慣れていましたが、かなり簡単なように見えるバニラJSを使用する際に障害が発生しました。

まず、基本的に<textarea>要素を持ち、その変更をすぐにJSにHTMLに伝播できるようにする必要があります。例えば、（JSの擬似コードで）：

<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"); 
    }   

私が欲しいものはtextareaの値が変更されるたびに、それはいくつかのフィルターを通過させますし、それをフロントエンドにレンダリングされるです。 #editorの値が変更されるたびにこの場合

は、その新しい値は、コールバック関数fooに送られ、それはbarフィルタを使用して解析取得し#parsedEditorを新しい値で更新されます。 AngularJSでは、それは基本的に（正確な構文とベストプラクティスを無視）されます：

<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"); 
    } 
} 

私はこれを行う方法のためにオンラインで検索、およびMDNに推奨されていなかっただけで、新しい提案された方法と.watch()あるObject.observe()を見つけました。さらに、onchange属性は、textarea要素が選択解除された後にコールバック関数を呼び出すだけで、値が選択解除されたときに値が変更されないときはいつでも、それを伝播したいと思います。

私が紛失しているJSでこれを行う簡単な方法が必要なような気がしますか？ここで

Answer 1

は、上記の私のコメントに基づいて、作業コードです：

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

私はあなたの意図がXですべてのスペースを置き換えるためだったと仮定しています。もしそうなら、あなたはおそらく正規表現したいと思う：

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

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

をあなたがターゲットとしているすべてのブラウザでテストし、IE9で期待どおりHTML5 APIは常に動作しないことを覚えておく必要があります：http://caniuse.com/#search=input

フィドルはここにあります：https://jsfiddle.net/mcgraphix/71evt900/