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过滤器和{{1}进行解析使用新值更新。在AngularJS中，它基本上是（忽略确切的语法和最佳实践）：

#parsedEditor

我在网上搜索了执行此操作的方法，并发现<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()则不建议在MDN上使用。此外，.watch()属性仅在取消选择onchange元素后才调用回调函数，并且我希望每当值更改而不取消选择时传播它。

我觉得在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

小提琴在这里：https://jsfiddle.net/mcgraphix/71evt900/

在VanillaJS中模拟ng-model双向数据绑定

1 个答案: