所以，我决定把我自己的溶液扔进锅里。这是一个工作的小提琴。注意，这只在非常现代的浏览器上运行。

它使用什么

这个实现非常现代——它需要一个(非常)现代的浏览器和用户两项新技术:

mutationobserver用于检测dom中的变化(事件监听器也被使用) 对象。观察以检测对象中的变化并通知dom。危险，由于这个答案已经被ECMAScript TC讨论并决定反对，考虑一个polyfill。

它是如何工作的

在元素上，放置一个domAttribute:objAttribute映射——例如bind='textContent:name' 在dataBind函数中读取它。观察元素和对象的变化。 当发生更改时，更新相关元素。

解决方案

下面是dataBind函数，注意它只有20行代码，可以更短:

function dataBind(domElement, obj) {    
    var bind = domElement.getAttribute("bind").split(":");
    var domAttr = bind[0].trim(); // the attribute on the DOM element
    var itemAttr = bind[1].trim(); // the attribute the object

    // when the object changes - update the DOM
    Object.observe(obj, function (change) {
        domElement[domAttr] = obj[itemAttr]; 
    });
    // when the dom changes - update the object
    new MutationObserver(updateObj).observe(domElement, { 
        attributes: true,
        childList: true,
        characterData: true
    });
    domElement.addEventListener("keyup", updateObj);
    domElement.addEventListener("click",updateObj);
    function updateObj(){
        obj[itemAttr] = domElement[domAttr];   
    }
    // start the cycle by taking the attribute from the object and updating it.
    domElement[domAttr] = obj[itemAttr]; 
}

下面是一些用法:

HTML:

<div id='projection' bind='textContent:name'></div>
<input type='text' id='textView' bind='value:name' />

JavaScript:

var obj = {
    name: "Benjamin"
};
var el = document.getElementById("textView");
dataBind(el, obj);
var field = document.getElementById("projection");
dataBind(field,obj);

这是一把能用的小提琴。注意，这个解决方案是相当通用的。对象。可以使用观察和突变观察器shimming。

改变元素的值可以触发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对象绑定。

我想给我的预习添点什么。我建议使用一种稍微不同的方法，它允许您不使用方法而简单地为对象分配一个新值。但必须指出的是，特别是老版本的浏览器不支持这一点，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/

迟来的派对，特别是因为我在几个月/几年前写了两篇相关的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中(当然是开放的)，以避免留下未绑定的黑洞。

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

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

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

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

<div id="name">

</div>

我已经通过一些基本的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>