对于DOM到JS方式

Question

请将此问题视为严格教育。 我仍然有兴趣听取新的答案和想法来实现这个

TL;博士

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

数据绑定到DOM

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

以下是AngularJS的图表：

two way data binding

所以基本上我的JavaScript类似于：

var a = {b:3};

然后输入（或其他形式）元素，如：

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

我希望输入的值为a.b的值（例如），当输入文本发生变化时，我也希望a.b也能改变。当a.b更改JavaScript时，输入会更改。

问题

在纯JavaScript中实现此目的的基本技术是什么？

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

如何对对象进行绑定？
如何听取表单中的更改？
是否可以通过简单的方式仅在模板级别修改HTML？我想不跟踪HTML文档本身的绑定，而只是跟踪JavaScript（使用DOM事件，并且JavaScript保留对所使用的DOM元素的引用）。

我尝试了什么？

我是Mustache的忠实粉丝，因此我尝试将其用于模板化。但是，当我尝试执行数据绑定本身时遇到了问题，因为Mustache将HTML作为字符串处理，因此在得到结果之后我没有引用viewmodel中对象的位置。我能想到的唯一解决方法是使用属性修改HTML字符串（或创建DOM树）本身。我不介意使用不同的模板引擎。

基本上，我强烈感觉到我手头的问题很复杂，而且有一个简单的解决方案。

注意：请不要提供使用外部库的答案，特别是那些数千行代码的库。我已经使用了（并且喜欢！）AngularJS和KnockoutJS。我真的不想要“使用框架x”形式的答案。最理想的是，我希望未来的读者不知道如何使用许多框架来掌握如何自己实现双向数据绑定。我不期望一个完整的答案，而是一个能够理解这个想法的答案。

Answer 1

如何对对象进行绑定？

如何听取表单中的更改？

更新两个对象的抽象

我想还有其他技术，但最终我会有一个对象来保存对相关DOM元素的引用，并提供一个接口来协调对自己数据及其相关元素的更新。

.addEventListener()为此提供了一个非常好的界面。您可以为它提供一个实现eventListener接口的对象，并且它将使用该对象作为this值调用其处理程序。

这使您可以自动访问元素及其相关数据。

定义对象

原型继承是实现这一目标的好方法，当然不是必需的。首先，您要创建一个接收元素和一些初始数据的构造函数。

function MyCtor(element, data) {
    this.data = data;
    this.element = element;
    element.value = data;
    element.addEventListener("change", this, false);
}

所以这里构造函数将元素和数据存储在新对象的属性中。它还会将change事件绑定到给定的element。有趣的是它传递新对象而不是函数作为第二个参数。 但仅此一点不起作用。

实施`eventListener`接口

要使这项工作，您的对象需要实现eventListener接口。完成此任务所需要的只是为对象提供handleEvent()方法。

这就是继承的来源。

MyCtor.prototype.handleEvent = function(event) {
    switch (event.type) {
        case "change": this.change(this.element.value);
    }
};

MyCtor.prototype.change = function(value) {
    this.data = value;
    this.element.value = value;
};

有许多不同的方式可以构建它，但是对于协调更新的示例，我决定让change()方法只接受一个值，并让handleEvent传递该值而不是事件对象。这样，change()也可以在没有事件的情况下调用。

现在，当change事件发生时，它将更新元素和.data属性。当您在JavaScript程序中调用.change()时也会发生同样的情况。

使用代码

现在您只需创建新对象，然后让它执行更新。 JS代码中的更新将出现在输入中，输入上的更改事件将对JS代码可见。

var obj = new MyCtor(document.getElementById("foo"), "20");

// simulate some JS based changes.
var i = 0;
setInterval(function() {
    obj.change(parseInt(obj.element.value) + ++i);
}, 3000);

DEMO： http://jsfiddle.net/RkTMD/

Answer 2

所以，我决定把自己的解决方案扔进锅里。这是一个working fiddle。请注意，这只能在非常现代的浏览器上运行。

它的用途

这种实现非常现代 - 它需要一个（非常）现代的浏览器和用户两种新技术：

MutationObservers检测dom中的更改（也使用事件侦听器）
Object.observe检测对象的变化并通知dom。 危险，因为这个答案已经写好了O.o已被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);

这是working fiddle。请注意，此解决方案非常通用。可以使用Object.observe和变异观察器匀场。

Answer 3

我想加入我的预备者。我建议采用稍微不同的方法，只需在不使用方法的情况下为对象分配新值。必须注意的是，特别是旧版浏览器不支持这种情况，IE9仍然需要使用不同的界面。

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

Getters and Setters

我的建议使用getters and setters相对年轻的功能，特别是限制器。一般来说，mutators允许我们“定制”某些属性如何赋值并检索的行为。

我将在这里使用的一个实现是Object.defineProperty方法。它适用于FireFox，GoogleChrome和 - 我认为 - 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/

Answer 4

我认为我的答案会更具技术性，但并不会有所不同，因为其他人使用不同的技术呈现相同的东西所以，首先，这个问题的解决方案是使用一种称为“观察者”的设计模式，它让你将数据与你的演示文稿分离，使得一件事的变化被广播给他们的听众，但在这种情况下这是双向的。

对于DOM到JS方式

要将DOM中的数据绑定到js对象，您可以以data属性（或类，如果需要兼容性）的形式添加标记，如下所示：

<input type="text" data-object="a" data-property="b" id="b" class="bind" value=""/>
<input type="text" data-object="a" data-property="c" id="c" class="bind" value=""/>
<input type="text" data-object="d" data-property="e" id="e" class="bind" value=""/>

这样可以通过js使用querySelectorAll（或老朋友getElementsByClassName获取兼容性）来访问它。

现在，您可以将侦听更改的事件绑定到以下方式：每个对象一个侦听器或容器/文档的一个大侦听器。绑定到文档/容器将触发事件，对于它或它的孩子进行的每次更改，它将具有更小的内存占用但会产生事件调用。
代码看起来像这样：

//Bind to each element
var elements = document.querySelectorAll('input[data-property]');

function toJS(){
    //Assuming `a` is in scope of the document
    var obj = document[this.data.object];
    obj[this.data.property] = this.value;
}

elements.forEach(function(el){
    el.addEventListener('change', toJS, false);
}

//Bind to document
function toJS2(){
    if (this.data && this.data.object) {
        //Again, assuming `a` is in document's scope
        var obj = document[this.data.object];
        obj[this.data.property] = this.value;
    }
}

document.addEventListener('change', toJS2, false);

对于JS do DOM方式

你将需要两件事：一个元对象将保存女巫DOM元素的引用被绑定到每个js对象/属性以及一种监听对象变化的方式。它基本上是相同的方式：您必须有一种方法来监听对象中的更改然后将其绑定到DOM节点，因为您的对象“不能拥有”元数据，您将需要另一个以某种方式保存元数据的对象属性名称映射到元数据对象的属性。代码将是这样的：

var a = {
        b: 'foo',
        c: 'bar'
    },
    d = {
        e: 'baz'
    },
    metadata = {
        b: 'b',
        c: 'c',
        e: 'e'
    };
function toDOM(changes){
    //changes is an array of objects changed and what happened
    //for now i'd recommend a polyfill as this syntax is still a proposal
    changes.forEach(function(change){
        var element = document.getElementById(metadata[change.name]);
        element.value = change.object[change.name];
    });
}
//Side note: you can also use currying to fix the second argument of the function (the toDOM method)
Object.observe(a, toDOM);
Object.observe(d, toDOM);

我希望我有所帮助。

Answer 5

昨天，我开始用自己的方式来绑定数据。

玩它很有趣。

我觉得它很漂亮，非常有用。至少在我使用firefox和chrome的测试中，Edge也必须正常工作。不确定其他人，但如果他们支持代理，我认为它会起作用。

https://jsfiddle.net/2ozoovne/1/

<H1>Bind Context 1</H1>
<input id='a' data-bind='data.test' placeholder='Button Text' />
<input id='b' data-bind='data.test' placeholder='Button Text' />
<input type=button id='c' data-bind='data.test' />
<H1>Bind Context 2</H1>
<input id='d' data-bind='data.otherTest' placeholder='input bind' />
<input id='e' data-bind='data.otherTest' placeholder='input bind' />
<input id='f' data-bind='data.test' placeholder='button 2 text - same var name, other context' />
<input type=button id='g' data-bind='data.test' value='click here!' />
<H1>No bind data</H1>
<input id='h' placeholder='not bound' />
<input id='i' placeholder='not bound'/>
<input type=button id='j' />

以下是代码：

(function(){
    if ( ! ( 'SmartBind' in window ) ) { // never run more than once
        // This hack sets a "proxy" property for HTMLInputElement.value set property
        var nativeHTMLInputElementValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
        var newDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
        newDescriptor.set=function( value ){
            if ( 'settingDomBind' in this )
                return;
            var hasDataBind=this.hasAttribute('data-bind');
            if ( hasDataBind ) {
                this.settingDomBind=true;
                var dataBind=this.getAttribute('data-bind');
                if ( ! this.hasAttribute('data-bind-context-id') ) {
                    console.error("Impossible to recover data-bind-context-id attribute", this, dataBind );
                } else {
                    var bindContextId=this.getAttribute('data-bind-context-id');
                    if ( bindContextId in SmartBind.contexts ) {
                        var bindContext=SmartBind.contexts[bindContextId];
                        var dataTarget=SmartBind.getDataTarget(bindContext, dataBind);
                        SmartBind.setDataValue( dataTarget, value);
                    } else {
                        console.error( "Invalid data-bind-context-id attribute", this, dataBind, bindContextId );
                    }
                }
                delete this.settingDomBind;
            }
            nativeHTMLInputElementValue.set.bind(this)( value );
        }
        Object.defineProperty(HTMLInputElement.prototype, 'value', newDescriptor);

    var uid= function(){
           return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
               var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
               return v.toString(16);
          });
   }

        // SmartBind Functions
        window.SmartBind={};
        SmartBind.BindContext=function(){
            var _data={};
            var ctx = {
                "id" : uid()    /* Data Bind Context Id */
                , "_data": _data        /* Real data object */
                , "mapDom": {}          /* DOM Mapped objects */
                , "mapDataTarget": {}       /* Data Mapped objects */
            }
            SmartBind.contexts[ctx.id]=ctx;
            ctx.data=new Proxy( _data, SmartBind.getProxyHandler(ctx, "data"))  /* Proxy object to _data */
            return ctx;
        }

        SmartBind.getDataTarget=function(bindContext, bindPath){
            var bindedObject=
                { bindContext: bindContext
                , bindPath: bindPath 
                };
            var dataObj=bindContext;
            var dataObjLevels=bindPath.split('.');
            for( var i=0; i<dataObjLevels.length; i++ ) {
                if ( i == dataObjLevels.length-1 ) { // last level, set value
                    bindedObject={ target: dataObj
                    , item: dataObjLevels[i]
                    }
                } else {    // digg in
                    if ( ! ( dataObjLevels[i] in dataObj ) ) {
                        console.warn("Impossible to get data target object to map bind.", bindPath, bindContext);
                        break;
                    }
                    dataObj=dataObj[dataObjLevels[i]];
                }
            }
            return bindedObject ;
        }

        SmartBind.contexts={};
        SmartBind.add=function(bindContext, domObj){
            if ( typeof domObj == "undefined" ){
                console.error("No DOM Object argument given ", bindContext);
                return;
            }
            if ( ! domObj.hasAttribute('data-bind') ) {
                console.warn("Object has no data-bind attribute", domObj);
                return;
            }
            domObj.setAttribute("data-bind-context-id", bindContext.id);
            var bindPath=domObj.getAttribute('data-bind');
            if ( bindPath in bindContext.mapDom ) {
                bindContext.mapDom[bindPath][bindContext.mapDom[bindPath].length]=domObj;
            } else {
                bindContext.mapDom[bindPath]=[domObj];
            }
            var bindTarget=SmartBind.getDataTarget(bindContext, bindPath);
            bindContext.mapDataTarget[bindPath]=bindTarget;
            domObj.addEventListener('input', function(){ SmartBind.setDataValue(bindTarget,this.value); } );
            domObj.addEventListener('change', function(){ SmartBind.setDataValue(bindTarget, this.value); } );
        }

        SmartBind.setDataValue=function(bindTarget,value){
            if ( ! ( 'target' in bindTarget ) ) {
                var lBindTarget=SmartBind.getDataTarget(bindTarget.bindContext, bindTarget.bindPath);
                if ( 'target' in lBindTarget ) {
                    bindTarget.target=lBindTarget.target;
                    bindTarget.item=lBindTarget.item;
                } else {
                    console.warn("Still can't recover the object to bind", bindTarget.bindPath );
                }
            }
            if ( ( 'target' in bindTarget ) ) {
                bindTarget.target[bindTarget.item]=value;
            }
        }
        SmartBind.getDataValue=function(bindTarget){
            if ( ! ( 'target' in bindTarget ) ) {
                var lBindTarget=SmartBind.getDataTarget(bindTarget.bindContext, bindTarget.bindPath);
                if ( 'target' in lBindTarget ) {
                    bindTarget.target=lBindTarget.target;
                    bindTarget.item=lBindTarget.item;
                } else {
                    console.warn("Still can't recover the object to bind", bindTarget.bindPath );
                }
            }
            if ( ( 'target' in bindTarget ) ) {
                return bindTarget.target[bindTarget.item];
            }
        }
        SmartBind.getProxyHandler=function(bindContext, bindPath){
            return  {
                get: function(target, name){
                    if ( name == '__isProxy' )
                        return true;
                    // just get the value
                    // console.debug("proxy get", bindPath, name, target[name]);
                    return target[name];
                }
                ,
                set: function(target, name, value){
                    target[name]=value;
                    bindContext.mapDataTarget[bindPath+"."+name]=value;
                    SmartBind.processBindToDom(bindContext, bindPath+"."+name);
                    // console.debug("proxy set", bindPath, name, target[name], value );
                    // and set all related objects with this target.name
                    if ( value instanceof Object) {
                        if ( !( name in target) || ! ( target[name].__isProxy ) ){
                            target[name]=new Proxy(value, SmartBind.getProxyHandler(bindContext, bindPath+'.'+name));
                        }
                        // run all tree to set proxies when necessary
                        var objKeys=Object.keys(value);
                        // console.debug("...objkeys",objKeys);
                        for ( var i=0; i<objKeys.length; i++ ) {
                            bindContext.mapDataTarget[bindPath+"."+name+"."+objKeys[i]]=target[name][objKeys[i]];
                            if ( typeof value[objKeys[i]] == 'undefined' || value[objKeys[i]] == null || ! ( value[objKeys[i]] instanceof Object ) || value[objKeys[i]].__isProxy )
                                continue;
                            target[name][objKeys[i]]=new Proxy( value[objKeys[i]], SmartBind.getProxyHandler(bindContext, bindPath+'.'+name+"."+objKeys[i]));
                        }
                        // TODO it can be faster than run all items
                        var bindKeys=Object.keys(bindContext.mapDom);
                        for ( var i=0; i<bindKeys.length; i++ ) {
                            // console.log("test...", bindKeys[i], " for ", bindPath+"."+name);
                            if ( bindKeys[i].startsWith(bindPath+"."+name) ) {
                                // console.log("its ok, lets update dom...", bindKeys[i]);
                                SmartBind.processBindToDom( bindContext, bindKeys[i] );
                            }
                        }
                    }
                    return true;
                }
            };
        }
        SmartBind.processBindToDom=function(bindContext, bindPath) {
            var domList=bindContext.mapDom[bindPath];
            if ( typeof domList != 'undefined' ) {
                try {
                    for ( var i=0; i < domList.length ; i++){
                        var dataTarget=SmartBind.getDataTarget(bindContext, bindPath);
                        if ( 'target' in dataTarget )
                            domList[i].value=dataTarget.target[dataTarget.item];
                        else
                            console.warn("Could not get data target", bindContext, bindPath);
                    }
                } catch (e){
                    console.warn("bind fail", bindPath, bindContext, e);
                }
            }
        }
    }
})();

然后，设置，只需：

var bindContext=SmartBind.BindContext();
SmartBind.add(bindContext, document.getElementById('a'));
SmartBind.add(bindContext, document.getElementById('b'));
SmartBind.add(bindContext, document.getElementById('c'));

var bindContext2=SmartBind.BindContext();
SmartBind.add(bindContext2, document.getElementById('d'));
SmartBind.add(bindContext2, document.getElementById('e'));
SmartBind.add(bindContext2, document.getElementById('f'));
SmartBind.add(bindContext2, document.getElementById('g'));

setTimeout( function() {
    document.getElementById('b').value='Via Script works too!'
}, 2000);

document.getElementById('g').addEventListener('click',function(){
bindContext2.data.test='Set by js value'
})

目前，我刚刚添加了HTMLInputElement值bind。

如果你知道如何改进它，请告诉我。

Answer 6

此链接"Easy Two-Way Data Binding in JavaScript"

中有一个非常简单的双向数据绑定实现

上一个链接以及来自knockoutjs，backbone.js和agility.js的想法，导致this light-weight and fast MVVM framework, ModelView.js ~~基于jQuery~~ ，它与jQuery很好地配合，我很谦虚（或者可能不那么谦虚）作者。

在下面重现示例代码（来自blog post link）：

DataBinder的示例代码

function DataBinder( object_id ) {
  // Use a jQuery object as simple PubSub
  var pubSub = jQuery({});

  // We expect a `data` element specifying the binding
  // in the form: data-bind-<object_id>="<property_name>"
  var data_attr = "bind-" + object_id,
      message = object_id + ":change";

  // Listen to change events on elements with the data-binding attribute and proxy
  // them to the PubSub, so that the change is "broadcasted" to all connected objects
  jQuery( document ).on( "change", "[data-" + data_attr + "]", function( evt ) {
    var $input = jQuery( this );

    pubSub.trigger( message, [ $input.data( data_attr ), $input.val() ] );
  });

  // PubSub propagates changes to all bound elements, setting value of
  // input tags or HTML content of other tags
  pubSub.on( message, function( evt, prop_name, new_val ) {
    jQuery( "[data-" + data_attr + "=" + prop_name + "]" ).each( function() {
      var $bound = jQuery( this );

      if ( $bound.is("input, textarea, select") ) {
        $bound.val( new_val );
      } else {
        $bound.html( new_val );
      }
    });
  });

  return pubSub;
}

关于JavaScript对象的关注点，a的最小实现用于此实验的用户模型可能如下：

function User( uid ) {
  var binder = new DataBinder( uid ),

      user = {
        attributes: {},

        // The attribute setter publish changes using the DataBinder PubSub
        set: function( attr_name, val ) {
          this.attributes[ attr_name ] = val;
          binder.trigger( uid + ":change", [ attr_name, val, this ] );
        },

        get: function( attr_name ) {
          return this.attributes[ attr_name ];
        },

        _binder: binder
      };

  // Subscribe to the PubSub
  binder.on( uid + ":change", function( evt, attr_name, new_val, initiator ) {
    if ( initiator !== user ) {
      user.set( attr_name, new_val );
    }
  });

  return user;
}

现在，每当我们想要将模型的属性绑定到一个UI时，我们就可以了只需要在相应的上设置一个合适的数据属性 HTML元素：

// javascript
var user = new User( 123 );
user.set( "name", "Wolfgang" );

<!-- html -->
<input type="number" data-bind-123="name" />

Answer 7

绑定任何html输入

<input id="element-to-bind" type="text">

定义两个函数：

function bindValue(objectToBind) {
var elemToBind = document.getElementById(objectToBind.id)    
elemToBind.addEventListener("change", function() {
    objectToBind.value = this.value;
})
}

function proxify(id) { 
var handler = {
    set: function(target, key, value, receiver) {
        target[key] = value;
        document.getElementById(target.id).value = value;
        return Reflect.set(target, key, value);
    },
}
return new Proxy({id: id}, handler);
}

使用功能：

var myObject = proxify('element-to-bind')
bindValue(myObject);

Answer 8

在过去7年中，情况发生了很大变化，我们现在在大多数浏览器中都具有本机Web组件。 IMO的核心是在元素之间共享状态，一旦状态发生变化即可轻松更新ui，反之亦然。

要在元素之间共享数据，您可以创建一个StateObserver类，并从中扩展您的Web组件。一个最小的实现看起来像这样：

// create a base class to handle state
class StateObserver extends HTMLElement {
	constructor () {
  	super()
    StateObserver.instances.push(this)
  }
	stateUpdate (update) {
  	StateObserver.lastState = StateObserver.state
    StateObserver.state = update
    StateObserver.instances.forEach((i) => {
    	if (!i.onStateUpdate) return
    	i.onStateUpdate(update, StateObserver.lastState)
    })
  }
}

StateObserver.instances = []
StateObserver.state = {}
StateObserver.lastState = {}

// create a web component which will react to state changes
class CustomReactive extends StateObserver {
	onStateUpdate (state, lastState) {
  	if (state.someProp === lastState.someProp) return
    this.innerHTML = `input is: ${state.someProp}`
  }
}
customElements.define('custom-reactive', CustomReactive)

class CustomObserved extends StateObserver {
	connectedCallback () {
  	this.querySelector('input').addEventListener('input', (e) => {
    	this.stateUpdate({ someProp: e.target.value })
    })
  }
}
customElements.define('custom-observed', CustomObserved)

<custom-observed>
  <input>
</custom-observed>
<br />
<custom-reactive></custom-reactive>

fiddle here

我喜欢这种方法，因为：

无需遍历即可找到data-个属性
没有Object.observe（不建议使用）
没有代理（它提供了一个钩子，但始终没有通信机制）
没有依赖关系（除了polyfill取决于目标浏览器）
这是合理的集中式和模块化...在html中描述状态，到处都有监听器会很快变得混乱。
它是可扩展的。这个基本实现是20行代码，但是您可以轻松地构建一些便利性，不变性和状态形状魔术，以使其更易于使用。

Answer 9

更改元素的值可以触发DOM event。响应事件的侦听器可用于在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;
  });
}

Here是一个代码和一个演示，它展示了DOM元素如何相互绑定或与JavaScript对象绑定。

Answer 10

我已经使用onkeypress和onchange事件处理程序进行了一些基本的javascript示例，以便对我们的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>

Answer 11

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>

<input type="text" id="demo" name="">
<p id="view"></p>
<script type="text/javascript">
    var id = document.getElementById('demo');
    var view = document.getElementById('view');
    id.addEventListener('input', function(evt){
        view.innerHTML = this.value;
    });

</script>
</body>
</html>

Answer 12

将变量绑定到输入（双向绑定）的简单方法是直接访问getter和setter中的input元素：

var variable = function(element){                    
                   return {
                       get : function () { return element.value;},
                       set : function (value) { element.value = value;} 
                   }
               };

在HTML中：

<input id="an-input" />
<input id="another-input" />

使用：

var myVar = new variable(document.getElementById("an-input"));
myVar.set(10);

// and another example:
var myVar2 = new variable(document.getElementById("another-input"));
myVar.set(myVar2.get());

<小时/> 没有getter / setter的更好的方法：

var variable = function(element){

                return function () {
                    if(arguments.length > 0)                        
                        element.value = arguments[0];                                           

                    else return element.value;                                                  
                }

        }

使用：

var v1 = new variable(document.getElementById("an-input"));
v1(10); // sets value to 20.
console.log(v1()); // reads value.

Answer 13

这是一个使用Object.defineProperty的想法，它直接修改了访问属性的方式。

代码：

function bind(base, el, varname) {
    Object.defineProperty(base, varname, {
        get: () => {
            return el.value;
        },
        set: (value) => {
            el.value = value;
        }
    })
}

用法：

var p = new some_class();
bind(p,document.getElementById("someID"),'variable');

p.variable="yes"

提琴：Here

Answer 14

晚些时候参加聚会，尤其是自从我几个月前/几年前写了2个与libs相关的内容后，我将在稍后提及它们，但看起来仍然与我相关。为了使它真正变短，我选择的技术是：

Proxy 用于观察模型
MutationObserver 用于跟踪DOM的更改（出于绑定原因，而不是值更改）
值更改（查看模型流）是通过常规的 addEventListener 处理程序

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

处理不同的应用程序生命周期案例（首先处理HTML，然后处理JS，首先处理JS，然后处理HTML，更改动态属性，等等）
允许深度绑定模型，以便可以绑定user.address.block
数组作为模型应该得到正确支持（shift，splice等）
处理ShadowDOM
试图尽可能容易地替换技术，因此，任何模板化的子语言都是对未来不友好的方法，因为它与框架的耦合度很高

考虑到所有这些因素，我认为不可能仅仅抛出几十条JS行。我尝试以模式而不是 lib 的方式进行操作-对我不起作用。

接下来，删除Object.observe，但是鉴于对模型的观察是至关重要的部分-必须将这整个部分与另一个库分开。现在讲到我如何处理此问题的原理-完全按照OP的要求：

模型（JS部分）

我的模型观察对象是代理，恕我直言，这是使其正常运行的唯一明智的方法。功能齐全的observer值得拥有它自己的库，因此我出于这个唯一的目的开发了object-observer库。

应该通过一些专用的API注册模型，这就是POJO变成Observable的地方，这里看不到任何捷径。被认为是绑定视图的DOM元素（请参阅下文），首先会使用模型的值进行更新，然后在每次数据更改时进行更新。

视图（HTML部分）

恕我直言，表达绑定的最简单方法是通过属性。许多人以前这样做过，许多人以后都会这样做，所以这里没有新闻，这只是这样做的正确方法。就我而言，我使用了以下语法：<span data-tie="modelKey:path.to.data => targerProperty"></span>，但这并不重要。对我而言，重要很重要，HTML中没有复杂的脚本语法-恕我直言，这是错误的。

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

如我们所说，视图首先从模型（如果有）中更新，然后在模型更改后更新。此外，应该通过MutationObserver观察整个DOM，以便对动态添加/删除/更改的元素做出反应（绑定/解除绑定）。此外，所有这些都应复制到ShadowDOM中（当然要打开一个），以免留下未绑定的黑洞。

细节列表的确可以走得更远，但是我认为这些原则是实现数据绑定的主要原则，一方面要实现功能完整，另一方面要保持理智的简单性。

因此，除了上面提到的object-observer外，我确实还写了data-tier库，该库实现了上述概念的数据绑定。

Answer 15

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

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

<div id="name">

</div>

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

TL;博士

数据绑定到DOM

问题

我尝试了什么？

15 个答案:

更新两个对象的抽象

定义对象

实施`eventListener`接口

使用代码

它的用途

如何运作

解决方案

Getters and Setters

对于DOM到JS方式

对于JS do DOM方式

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

TL;博士

数据绑定到DOM

问题

我尝试了什么？

15 个答案:

更新两个对象的抽象

定义对象

实施eventListener接口

使用代码

它的用途

如何运作

解决方案

Getters and Setters

对于DOM到JS方式

对于JS do DOM方式

实施`eventListener`接口