canjs的数据绑定

在上一篇关于canjs的文章中提到了组件开发，其中对于tag: "grid"的组件中的定义方法有各种令人生僻的用法：

can.Component.extend({
  tag: "grid",
  scope: {
	items: [],
	waiting: true
  },
  template: "<table><tbody><content></content></tbody></table>",
  events: {
	init: function () {
	  this.A();
	},
	"{scope} deferreddata": "A",
	A: function () {
	  var deferred = this.scope.attr('deferreddata'),
		scope = this.scope;
	  if (can.isDeferred(deferred)) {
		this.scope.attr("waiting", true);
		this.element.find('tbody').css('opacity', 0.5);
		deferred.then(function (items) {
		  scope.attr('items').replace(items);
		});
	  } else {
		scope.attr('items').attr(deferred, true);
	  }
	},
	"{items} change": function () {
	  this.scope.attr("waiting", false);
	  this.element.find('tbody').css('opacity', 1);
	}
  }
});

那现在我们翻开canjs的bindings.js的源码，可以看到如下针对输入框做的双向绑定代码：

// ### Value 
// A can.Control that manages the two-way bindings on most inputs.  When can-value is found as an attribute 
// on an input, the callback above instantiates this Value control on the input element.
var Value = can.Control.extend({
	init: function () {
		// Handle selects by calling `set` after this thread so the rest of the element can finish rendering.
		if (this.element[0].nodeName.toUpperCase() === "SELECT") {
			setTimeout(can.proxy(this.set, this), 1);
		} else {
			this.set();
		}

	},
	// If the live bound data changes, call set to reflect the change in the dom.
	"{value} change": "set",
	set: function () {
		// This may happen in some edgecases, esp. with selects that are not in DOM after the timeout has fired
		if (!this.element) {
			return;
		}
		var val = this.options.value();
		// Set the element's value to match the attribute that was passed in
		this.element[0].value = (val == null ? '' : val);
	},
	// If the input value changes, this will set the live bound data to reflect the change.
	"change": function () {
		// This may happen in some edgecases, esp. with selects that are not in DOM after the timeout has fired
		if (!this.element) {
			return;
		}
		// Set the value of the attribute passed in to reflect what the user typed
		this.options.value(this.element[0].value);
	}
}),

从注释中得知：{value} change触发的是数据绑定，如果数据发生变化，会反应到页面上。change触发的是页面反向绑定，如果页面元素发生变化，会反应到数据上。对于Control来说，里面可以内置一个init方法用于初始化。

另外该文件中还有针对radiobox/checkbox、select等的数据绑定，原理上和这也是一样的。