javascript - 在 VanillaJS 中模拟 ng-model 双向数据绑定(bind)

Question

我用惯了AngularJS框架，使用VanillaJS时遇到了一个障碍，看似很简单，但上线后才发现实践过时。

首先，我需要能够拥有一个 <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");
     }
 }

我在网上搜索了执行此操作的方法，并找到了 Object.observe()这只是一个新提出的方法和.watch()这在 MDN 上是不推荐的。此外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");
}  

您需要在所有目标浏览器中进行测试，并记住 HTML5 api 在 IE9 中并不总是按预期工作:http://caniuse.com/#search=input

fiddle 在这里:https://jsfiddle.net/mcgraphix/71evt900/