JavaScript Vanilla 两种方式绑定答案

【问题标题】：JavaScript Vanilla Two Way BindingJavaScript Vanilla 两种方式绑定
【发布时间】：2018-12-09 06:50:19
【问题描述】：

我发现这个用纯 JavaScript 编写的非常短但方便的双向绑定代码。数据绑定工作正常，但我想要的是从第一个输入中获取值并将其乘以所需的数字并将结果绑定到下一个输入。我将不胜感激任何帮助。这是我的 HTML 代码：

<input class="age" type="number">
<input class="age" type="number">

和 JavaScript 代码：

    var $scope = {};
(function () {
    var bindClasses = ["age"];
    var attachEvent = function (classNames) {
        classNames.forEach(function (className) {
            var elements = document.getElementsByClassName(className);
            for (var index in elements) {
                elements[index].onkeyup = function () {
                    for (var index in elements) {
                        elements[index].value = this.value;
                    }
                }
            }
            Object.defineProperty($scope, className, {
                set: function (newValue) {
                    for (var index in elements) {
                        elements[index].value = newValue;
                    }
                }
            });
        });
    };
    attachEvent(bindClasses);
})();

【问题讨论】：

你遇到了什么问题？
它所做的只是反映了第一个输入中写的完全相同的内容，但我想通过乘以数字来改变结果。
数字乘以什么？在第二个文本框中输入的数字？
我想取第一个输入框中的数字，然后乘以所需的数字（例如2），然后将结果发送到第二个输入框。

标签： javascript javascript-databinding

【解决方案1】：

如果想要的结果是取第一个输入值，对它做点什么，把它放到第二个输入上，那为什么这么严重？

(function () {
  var bindClasses = ["age"];
  var attachEvent = function (classNames) {
    classNames.forEach( function( className ) {
      var els = document.getElementsByClassName( className ),
          from, to;
      if ( 2 > els.length ) {
        return;
      }
      from = els[0];
      to   = els[els.length - 1];

      from.addEventListener( 'keyup', function() {
        var v = this.value;
        // Do whatever you want with that value
        // Then assign it to last el
        if ( isNaN( v ) ) {
          return;
        }
        v = v / 2;
        to.value = v;
      });
    });
  };
  attachEvent(bindClasses);
})();

【讨论】：

【解决方案2】：

另一种在 JS 中进行双向绑定的简单方法可能是这样的：

<!-- index.html -->
<form action="#" onsubmit="vm.onSubmit(event, this)">
    <input onchange="vm.username=this.value" type="text" id="Username">
    <input type="submit" id="Submit">
</form>
<script src="vm.js"></script>

// vm.js - vanialla JS
let vm = {
    _username: "",
    get username() {
        return this._username;
    },
    set username(value) {
        this._username = value;
    },
    onSubmit: function (event, element) {
        console.log(this.username);
    }
}

JS Getter 和 Setter 非常适合这一点 - 尤其是当您查看浏览器对此的支持时。

【讨论】：