// －－－ View层 请看Html代码段
// －－－－－－－－－ Model层 －－－－－－－－－－
var newPerson = {
  myInput: "dfdf"
};

// －－－－－－－－－ viewModel层 －－－－－－－－－－
// console.log(window)
var snabbdom = window.snabbdom; //定义patch函数 实现dom节点更新的核心方法
var patch = snabbdom.init([
  snabbdom_class,
  snabbdom_props,
  snabbdom_style,
  snabbdom_eventlisteners
]);
var h = window.h; // 定义h函数
var toVNode = window.tovnode.default; // 定义toVNode函数
var oldVNode = null,
  newVNode = null;
function bindInputModel() {
  var inputEl = document.querySelector("#my-input");
  if (inputEl && inputEl.value !== undefined) {
    inputEl.oninput = function(e) {
      console.log(newPerson.myInput);
      if (e.target.value !== newPerson.myInput) {
        newPerson.myInput = e.target.value;
      }
    };
  }
}
function updateInputArea(newVal, oldVal) {
  var el = document.querySelector("#input-area");
  // 传统的拼接html字符串的方式实现更新视图View
  var compiled = _.template(
    '<input type="text" class="form-control" data-hotkey="xxxhotkey" name="search" value="${ myInput }" placeholder="Search or jump to…" id="my-input" /><span>The value of the input is <b id="my-input__val">${ myInput }</b></span>'
  );
  var inputEl = el.querySelector("#my-input");
  if (!inputEl) {
    el.innerHTML = compiled({ myInput: newVal });
    oldVNode = toVNode(el);
  bindInputModel();
  } else { // 关键的实现双向绑定代码如下
    var newNode = el.cloneNode(false)
    newNode.innerHTML = compiled({ myInput: newVal });
    newVNode = toVNode(newNode)
    patch(oldVNode, newVNode)
    oldVNode = newVNode
  }
}
Object.defineProperty(newPerson, "myInput", {
  set: function(x) {
    if (x !== this.oldPropValue) {
      updateInputArea(x, this.oldPropValue);
      this.oldPropValue = x;
    } else {
      console.log("myInput的值没变");
    }
  },
  get: function() {
    console.log("in property get accessor");
    return this.oldPropValue;
  },
  enumerable: true,
  configurable: true
});
bindInputModel();

// －－－－－－－－－ mvvm 数据驱动开发方式，现在只需修改newPerson的数据，View层的Dom节点会自动更新，如下：
setTimeout(function() {
  newPerson.myInput = "新的值";
}, 5000);

// 下面只是计时器，与上面无关，set the timer
Object.prototype.delay = function(time, doSomething) {
  var self = this,
    startTime = time;
  if (self) {
    setTimeout(function() {
      doSomething(self, startTime);
    }, time);
  }
  return this;
};
var el = document.querySelector("#timer");
for (var i = 0; i <= 5; i++) {
  el.delay(i * 1000, function(self, startTime) {
    self.innerHTML = 5 - startTime / 1000;
  });
}