如何在JavaScript中实现DOM数据绑定

请严格把这个问题当作教育问题来对待。我仍然有兴趣听到新的答案和想法来实现这一点

博士tl;

如何用JavaScript实现双向数据绑定?

到DOM的数据绑定

通过数据绑定到DOM，我的意思是，例如，拥有一个带有属性b的JavaScript对象a。然后有一个<input> DOM元素(例如)，当DOM元素改变时，a也会改变，反之亦然(也就是说，我的意思是双向数据绑定)。

下面是AngularJS的一个图:

JavaScript是这样的:

var a = {b:3};

然后输入(或其他形式)元素，如:

<input type='text' value=''>

我希望输入的值是a.b的值(例如)，当输入文本发生变化时，我希望a.b也发生变化。当JavaScript中的a.b发生变化时，输入也会发生变化。

这个问题

在纯JavaScript中完成这个任务的基本技术是什么?

具体来说，我想要一个好的答案参考:

对象绑定是如何工作的? 倾听形式上的变化是如何起作用的? 是否有可能以一种简单的方式只在模板级别修改HTML ?我不想在HTML文档本身中跟踪绑定，而只在JavaScript中跟踪绑定(使用DOM事件，JavaScript保持对所使用的DOM元素的引用)。

我都试过什么?

我是一个大粉丝的胡子，所以我尝试使用它的模板。然而，我在尝试执行数据绑定本身时遇到了问题，因为Mustache将HTML处理为字符串，所以在我得到它的结果后，我没有引用到我的视图模型中的对象在哪里。我能想到的唯一解决办法是用属性修改HTML字符串(或创建DOM树)本身。我不介意使用不同的模板引擎。

基本上，我有一种强烈的感觉，我把手头的问题复杂化了，有一个简单的解决办法。

注意:请不要提供使用外部库的答案，特别是那些有数千行代码的答案。我用过(而且喜欢!)AngularJS和KnockoutJS。我真的不想要“使用框架x”这种形式的答案。最理想的情况是，我希望未来不知道如何使用许多框架的读者能够自己掌握如何实现双向数据绑定。我不期待一个完整的答案，但希望能让人理解。

当前回答

这是一个非常简单的双向数据绑定在香草javascript....

<input type="text" id="inp" onkeyup="document.getElementById('name').innerHTML=document.getElementById('inp').value;">

<div id="name">

</div>

2018-01-07 17:26:32

其他回答

改变元素的值可以触发DOM事件。可以使用响应事件的侦听器在JavaScript中实现数据绑定。

例如:

function bindValues(id1, id2) {
  const e1 = document.getElementById(id1);
  const e2 = document.getElementById(id2);
  e1.addEventListener('input', function(event) {
    e2.value = event.target.value;
  });
  e2.addEventListener('input', function(event) {
    e1.value = event.target.value;
  });
}

下面的代码和演示演示了DOM元素如何相互绑定或与JavaScript对象绑定。

2016-12-22 20:21:44

我想给我的预习添点什么。我建议使用一种稍微不同的方法，它允许您不使用方法而简单地为对象分配一个新值。但必须指出的是，特别是老版本的浏览器不支持这一点，IE9仍然需要使用不同的界面。

最值得注意的是，我的方法没有使用事件。

getter和setter

我的建议利用了getter和setter相对较年轻的特性，特别是仅使用setter。一般来说，突变器允许我们“自定义”某些属性如何赋值和检索的行为。

这里我将使用的一个实现是Object.defineProperty方法。它适用于火狐，谷歌浏览器，我想还有IE9。还没有测试其他浏览器，但由于这只是理论…

不管怎样，它接受三个参数。第一个参数是您希望为其定义新属性的对象，第二个参数是类似于新属性名称的字符串，最后一个“描述符对象”提供关于新属性行为的信息。

两个特别有趣的描述符是get和set。示例如下所示。注意，使用这两个描述符将禁止使用其他4个描述符。

function MyCtor( bindTo ) {
    // I'll omit parameter validation here.

    Object.defineProperty(this, 'value', {
        enumerable: true,
        get : function ( ) {
            return bindTo.value;
        },
        set : function ( val ) {
            bindTo.value = val;
        }
    });
}

现在使用这个有点不同:

var obj = new MyCtor(document.getElementById('foo')),
    i = 0;
setInterval(function() {
    obj.value += ++i;
}, 3000);

我想强调的是，这只适用于现代浏览器。

工作提琴:http://jsfiddle.net/Derija93/RkTMD/1/

2013-05-10 14:50:10

我已经通过一些基本的javascript示例，使用onkeypress和onchange事件处理程序，使绑定视图到我们的js和js视图

这里的例子plunker http://plnkr.co/edit/7hSOIFRTvqLAvdZT4Bcc?p=preview

<!DOCTYPE html>
<html>
<body>

    <p>Two way binding data.</p>

    <p>Binding data from  view to JS</p>

    <input type="text" onkeypress="myFunction()" id="myinput">
    <p id="myid"></p>
    <p>Binding data from  js to view</p>
    <input type="text" id="myid2" onkeypress="myFunction1()" oninput="myFunction1()">
    <p id="myid3" onkeypress="myFunction1()" id="myinput" oninput="myFunction1()"></p>

    <script>

        document.getElementById('myid2').value="myvalue from script";
        document.getElementById('myid3').innerHTML="myvalue from script";
        function myFunction() {
            document.getElementById('myid').innerHTML=document.getElementById('myinput').value;
        }
        document.getElementById("myinput").onchange=function(){

            myFunction();

        }
        document.getElementById("myinput").oninput=function(){

            myFunction();

        }

        function myFunction1() {

            document.getElementById('myid3').innerHTML=document.getElementById('myid2').value;
        }
    </script>

</body>
</html>

2017-02-01 11:54:14

迟来的派对，特别是因为我在几个月/几年前写了两篇相关的lib，我以后会提到它们，但看起来仍然与我有关。简短地说，我选择的技术是:

模型观测的代理用于跟踪DOM更改的MutationObserver(用于绑定原因，而不是值更改) 值的变化(从视图到模型流)通过常规的addEventListener处理程序来处理

恕我直言，除了OP之外，重要的是数据绑定实现将:

处理不同的应用生命周期情况(HTML先，然后JS, JS先，然后HTML，动态属性变化等) 允许模型深度绑定，这样就可以绑定user.address.block 数组作为模型应该得到正确的支持(移位、拼接等) 处理ShadowDOM 尽量简化技术替换，因此任何模板子语言都是一种不适合未来更改的方法，因为它与框架耦合得太紧密了

考虑到所有这些因素，在我看来不可能仅仅抛出几十行JS代码。我试着把它作为一种模式而不是自由——对我没用。

接下来，拥有Object。observe被删除了，但是考虑到模型的观察是至关重要的部分——这整个部分必须被关注——分离到另一个库中。现在说到我如何处理这个问题的原则——正如OP所问的那样:

模型(JS部分)

我对模型观察的看法是代理，恕我直言，这是唯一可行的方法。功能齐全的观察者应该有自己的库，所以我开发了对象观察者库。

模型应该通过一些专用的API注册，这就是pojo变成可观察对象的地方，在这里看不到任何快捷方式。DOM元素被认为是绑定视图(见下文)，首先用模型的值更新，然后在每次数据更改时更新。

视图(HTML部分)

恕我直言，表达绑定最简洁的方式是通过属性。很多人以前这样做过，很多人以后也会这样做，所以这里没有新闻，这是一种正确的方法。在我的例子中，我使用了以下语法:<span data-tie="modelKey:path.to。data => targerProperty"></span>，但这并不重要。对我来说重要的是，HTML中没有复杂的脚本语法——这是错误的，再说一次，恕我直言。

首先要收集指定为绑定视图的所有元素。在我看来，从性能角度来看，管理模型和视图之间的一些内部映射是不可避免的，似乎是牺牲内存+一些管理来节省运行时查找和更新的正确情况。

视图首先从模型中更新(如果可用的话)，然后根据后来的模型更改进行更新，正如我们所说的。而且，应该通过MutationObserver观察整个DOM，以便对动态添加/删除/更改的元素做出反应(绑定/取消绑定)。此外，所有这些都应该复制到ShadowDOM中(当然是开放的)，以避免留下未绑定的黑洞。

具体细节还可以进一步列出，但在我看来，这些是实现数据绑定的主要原则，一方面是功能的完整性，另一方面是简单性。

因此，除了上面提到的对象观察器之外，我实际上还编写了数据层库，它按照上面提到的概念实现了数据绑定。

2020-02-17 20:21:56

这是一个非常简单的双向数据绑定在香草javascript....

<input type="text" id="inp" onkeyup="document.getElementById('name').innerHTML=document.getElementById('inp').value;">

<div id="name">

</div>

2018-01-07 17:26:32

如何在JavaScript中实现DOM数据绑定

推荐文章

最新文章

标签