- How would binding work for objects?
(如何绑定对象的工作？)
- How listening to change in the form might work?
(如何听取表格中的变化可能有效？)
An abstraction that updates both objects(一种更新两个对象的抽象)
I suppose there are other techniques, but ultimately I'd have an object that holds reference to a related DOM element, and provides an interface that coordinates updates to its own data and its related element.
(我想还有其他技术，但最终我有一个对象来保存对相关DOM元素的引用，并提供一个接口来协调对自己的数据及其相关元素的更新。)
The .addEventListener() provides a very nice interface for this.
(.addEventListener()为此提供了一个非常好的接口。)
You can give it an object that implements the eventListener interface, and it'll invoke its handlers with that object as the this value.(您可以为它提供一个实现eventListener接口的对象，并且它将使用该对象作为this值调用其处理程序。)
This gives you automatic access to both the element and its related data.
(这使您可以自动访问元素及其相关数据。)
Defining your object(定义你的对象)
Prototypal inheritance is a nice way to implement this, though not required of course.
(原型继承是实现这一目标的好方法，当然不是必需的。)
First you'd create a constructor that receives your element and some initial data.(首先，您将创建一个接收元素和一些初始数据的构造函数。)
function MyCtor(element, data) {
this.data = data;
this.element = element;
element.value = data;
element.addEventListener("change", this, false);
}
So here the constructor stores the element and data on properties of the new object.
(所以这里的构造函数将元素和数据存储在新对象的属性中。)
It also binds a change event to the given element .(它还将change事件绑定到给定element 。)
The interesting thing is that it passes the new object instead of a function as the second argument.(有趣的是它传递新对象而不是函数作为第二个参数。)
But this alone won't work.(但仅此一点是行不通的。)
Implementing the eventListener interface(实现eventListener接口)
To make this work, your object needs to implement the eventListener interface.
(要使其工作，您的对象需要实现eventListener接口。)
All that's needed to accomplish this is to give the object a handleEvent() method.(完成此任务所需要的只是为对象提供handleEvent()方法。)
That's where the inheritance comes in.
(这就是继承的来源。)
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;
};
There are many different ways in which this could be structured, but for your example of coordinating updates, I decided to make the change() method only accept a value, and have the handleEvent pass that value instead of the event object.
(有许多不同的方式可以构建它，但是对于协调更新的示例，我决定使change()方法只接受一个值，并让handleEvent传递该值而不是事件对象。)
This way the change() can be invoked without an event as well.(这样，也可以在没有事件的情况下调用change() 。)
So now, when the change event happens, it'll update both the element and the .data property.
(所以现在，当change事件发生时，它将更新元素和.data属性。)
And the same will happen when you call .change() in your JavaScript program.(当您在JavaScript程序中调用.change()时也会发生同样的情况。)
Using the code(使用代码)
Now you'd just create the new object, and let it perform updates.
(现在，您只需创建新对象，然后让它执行更新。)
Updates in JS code will appear on the input, and change events on the input will be visible to the JS code.(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/
(演示： http ： //jsfiddle.net/RkTMD/)
