组件实例

创建实例

创建drunk.Component实例作为一个view-model对象并挂载到指定的DOM元素上，是使用drunk进行MVVM开发的第一个步骤。

var viewModel= new drunk.Component(/* model */);
viewModel.$mount(document.getElementById('view'));

添加事件处理回调方法

viewModel.onSomeElementClick = function () {
  // Do somthing
};

属性绑定

所有在DOM元素上绑定的属性都会在实例上进行监听，当这些属性的值改变时会响应到绑定的DOM元素上。

<div id="view">Hello, {{message}}</div>

var viewModel = new drunk.Component();
viewModel.$mount(document.getElementById('view'));
viewModel.message = 'World';

message属性在viewModel实例创建时还没有被监听，当挂载到id为view的div上时，会对该div做数据绑定解析，并监听message属性并创建元素与viewModel实例的绑定；这时得到的message数据为undefined，在文本节点上并不会显示任何东西，当message属性被赋值为'World'的时候，会触发属性改变的通知，告诉绑定的节点更新。在实例被销毁前message属性可以在任何时候声明和赋值。

属性监听

var watcherCallback = function (newValue) {
 console.log('Result of "a + b":', newValue);
};

viewModel.$watch('a + b', watcherCallback);

可以能过实例的$watch(expression, callback)方法对表达式里的所有属性进行监听，这是除了在DOM元素上声明绑定的另一种方式。上面的语句中，a和b属性的值的改变都会被监控到并触发watcherCallback回调。

实例的生命周期

new
 |==> 调用实例的init方法
 |==> 触发 drunk.Component.Event.created 事件（当作为子组件时）
$mount
 |==> 解析DOM元素上的所有数据绑定
      |==> 创建drunk.Binding实例
           |==> 解析绑定表达式
           |==> 创建drunk.Watcher实例
           |==> 把drunk.Binding的绑定更新方法注册到drunk.Watcher实例上
      |==> 触发所有绑定属性的更新，使所有绑定的DOM元素拿到当前的数据进行渲染
 |==> 触发drunk.Component.Event.mounted事件
$release
 |==> 触发drunk.Component.Event.release事件
 |==> 销毁所有的drunk.Binding实例
 |==> 销毁所有的drunk.Watcher实例
 |==> delete所有监听属性的getter/setter
 |==> 移除实例上的所有引用