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

时间:2016-05-19 17:25:13

标签: javascript jquery angularjs

我以前习惯使用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中必须有一种更简单的方法可以解决这个问题吗?

1 个答案:

答案 0 :(得分: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/