绑定任何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);

在过去的7年里，情况发生了很大的变化，我们现在在大多数浏览器中都有本地web组件。在我看来，问题的核心是在元素之间共享状态，一旦你有了它，当状态改变时更新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>

小提琴在这里

我喜欢这种方法，因为:

no dom traversal to find data- properties no Object.observe (deprecated) no Proxy (which provides a hook but no communication mechanism anyway) no dependencies, (other than a polyfill depending on your target browsers) it's reasonably centralised & modular... describing state in html, and having listeners everywhere would get messy very quickly. it's extensible. This basic implementation is 20 lines of code, but you could easily build up some convenience, immutability, and state shape magic to make it easier to work with.

下面是一个使用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"

小提琴:

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

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

它使用什么

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

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到JS的方式

为了将DOM中的数据绑定到js对象，你可以添加数据属性形式的标记(如果你需要兼容性，也可以添加类)，像这样:

<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做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);

希望我能帮上忙。