Commit 13: kinda work now except for scope nesting

• 主要改动：将节点的each属性优先处理

• 相关代码：

  可以看看src/seed.js的_compile函数，处理节点之前判断了是否有each属性：

  // ...
  if (eachExp) {
      // each block
      var binding = bindingParser.parse(eachAttr, eachExp)
      if (binding) {
          self._bind(node, binding)
      }
  }
  // ...
  

Commit 14：almost there! scope nesting

没有大改动。

接下来我会跳过一些琐碎的commit。

Commit 15: finally workssssss

• 主要改动：加了一些让人神清气爽的注释

  • 比如为什么要先处理一下each（Commit 13）

    // need to set each block now so it can inherit
    // parent scope. i.e. the childSeeds must have been
    // initiated when parent scope setters are invoked
    

    因为需要继承父节点的scope

  • 为什么要复制一份data

    // keep a temporary copy for all the real data
    // so we can overwrite the passed in data object
    // with getter/setters.
    

Commit 17: emitter

• 主要改动：添加了component/emitter

Commit 18: todo demo kinda works

• 主要改动：增加checked指令，修改on指令

• 代码实现

  1. checked指令

     checked: {
         bind: function () {
             var el = this.el,
                 self = this
             this.change = function () {
                 self.seed.scope[self.key] = el.checked
             }
             el.addEventListener('change', this.change)
         },
         update: function (value) {
             this.el.checked = value
         },
         unbind: function () {
             this.el.removeEventListener('change', this.change)
         }
     }
     

     可以看出这是一个控制el.checked属性的指令，可以控制元素是否选中

  2. 修改on指令

     不是很重要，略了

Commit 19: awesome

• 主要改动：修改class指令的实现

• 代码：

  修改后，sd-class的值可以是一个变量。

  class: function (value) {
      if (this.arg) {
          this.el.classList[value ? 'add' : 'remove'](this.arg)
      } else {
          // sd-class的值可以是一个变量
          // 比如<div id="app" sd-class="filter">
          // filter的值是一个样式
          // 比如scope.filter = 'all'
          this.el.classList.remove(this.lastVal)
          this.el.classList.add(value)
          this.lastVal = value
      }
  }
  

Commit 22: nested controllers

• 主要改动：处理嵌套controller的情况，类似以下这种

  <div sd-controller="Grandpa">
      <p sd-text="name"></p>
      <div sd-controller="Dad">
          <p><span sd-text="name"></span>, son of <span sd-text="^name"></span></p>
          <div sd-controller="Son">
              <p><span sd-text="name"></span>, son of <span sd-text="^name"></span></p>
              <div sd-controller="Baby">
                  <p><span sd-text="name"></span>, son of <span sd-text="^name"></span>, grandson of <span sd-text="^^name"></span> and great-grandson of <span sd-text="$name"></span></p>
              </div>
          </div>
      </div>
  </div>
  

• 代码实现：

  相关文件dev/nested.html

  1. 首先准备好四个controller

     commit22-controllers.png

  2. Seed.bootstrap()

     commit22-bootstrap().png

     当遇到sd-controller属性时，会创建一个新的实例，该实例中的parentSeed属性指向父实例。最终我们会得到如下的几个实例：

     commit22-实例.png 因此，在页面中我们可以直接使用^来访问上一作用域。例如<span sd-text="^name"></span>，原理就是有几个^就向上访问几次parentSeed，如以下代码所示（src/seed.js）

     // handle scope nesting
     if (snr && !isEachKey) { // each的情况
         scopeOwner = this.parentSeed
     } else { // 其他情况
         // ancestorKeyRE = /\^/g
         // 匹配"^"字符
         var ancestors = key.match(ancestorKeyRE),
             root      = key.match(rootKeyRE)
         // 有"^"的情况
         if (ancestors) {
             key = key.replace(ancestorKeyRE, '')
             var levels = ancestors.length
             while (scopeOwner.parentSeed && levels--) {
                 scopeOwner = scopeOwner.parentSeed
             }
         } else if (root) {
             key = key.replace(rootKeyRE, '')
             while (scopeOwner.parentSeed) {
                 scopeOwner = scopeOwner.parentSeed
             }
         }
     }