Directive: use new params API

Author: yyx990803

src/directive.js

@@ -77,6 +77,9 @@ Directive.prototype._bind = function () {
     _.extend(this, def)
   }
 
+  // setup directive params
+  this._setupParams()
+
   // initial bind
   if (this.bind) {
     this.bind()
@@ -131,6 +134,65 @@ Directive.prototype._bind = function () {
   this._bound = true
 }
 
+/**
+ * Setup all param attributes, e.g. track-by,
+ * transition-mode, etc...
+ */
+
+Directive.prototype._setupParams = function () {
+  if (!this.params) {
+    return
+  }
+  var params = this.params
+  // swap the params array with a fresh object.
+  this.params = Object.create(null)
+  var i = params.length
+  var key, val, mappedKey
+  while (i--) {
+    key = params[i]
+    mappedKey = _.camelize(key)
+    val = _.attr(this.el, key)
+    if (val != null) {
+      // static
+      this.params[mappedKey] = val === '' ? true : val
+    } else {
+      // dynamic
+      val = _.getBindAttr(this.el, key)
+      if (val != null) {
+        this._setupParamWatcher(mappedKey, val)
+      }
+    }
+  }
+}
+
+/**
+ * Setup a watcher for a dynamic param.
+ *
+ * @param {String} key
+ * @param {String} expression
+ */
+
+Directive.prototype._setupParamWatcher = function (key, expression) {
+  var self = this
+  var called = false
+  var unwatch = (this._scope || this.vm).$watch(expression, function (val, oldVal) {
+    self.params[key] = val
+    // since we are in immediate mode,
+    // only call the param change callbacks if this is not the first update.
+    if (called) {
+      var cb = self.paramWatchers && self.paramWatchers[key]
+      if (cb) {
+        cb.call(self, val, oldVal)
+      }
+    } else {
+      called = true
+    }
+  }, {
+    immediate: true
+  })
+  ;(this._paramUnwatchFns || (this._paramUnwatchFns = [])).push(unwatch)
+}
+
 /**
  * Check if the directive is a function caller
  * and if the expression is a callable one. If both true,
@@ -161,30 +223,6 @@ Directive.prototype._checkStatement = function () {
   }
 }
 
-/**
- * Check for an attribute directive param, e.g. lazy
- *
- * @param {String} name
- * @return {String}
- */
-
-Directive.prototype.param = function (name) {
-  var param = _.attr(this.el, name)
-  if (param != null) {
-    param = (this._scope || this.vm).$interpolate(param)
-  } else {
-    param = _.getBindAttr(this.el, name)
-    if (param != null) {
-      param = (this._scope || this.vm).$eval(param)
-      process.env.NODE_ENV !== 'production' && _.log(
-        'You are using bind- syntax on "' + name + '", which ' +
-        'is a directive param. It will be evaluated only once.'
-      )
-    }
-  }
-  return param
-}
-
 /**
  * Set the corresponding value with the setter.
  * This should only be used in two-way directives
@@ -253,13 +291,21 @@ Directive.prototype._teardown = function () {
       this._watcher.teardown()
     }
     var listeners = this._listeners
+    var i
     if (listeners) {
-      for (var i = 0; i < listeners.length; i++) {
+      i = listeners.length
+      while (i--) {
         _.off(this.el, listeners[i][0], listeners[i][1])
       }
     }
-    this.vm = this.el =
-    this._watcher = this._listeners = null
+    var unwatchFns = this._paramUnwatchFns
+    if (unwatchFns) {
+      i = unwatchFns.length
+      while (i--) {
+        unwatchFns[i]()
+      }
+    }
+    this.vm = this.el = this._watcher = this._listeners = null
   }
 }
 

src/directives/element/partial.js

@@ -1,40 +1,27 @@
 var _ = require('../../util')
-var FragmentFactory = require('../../fragment/factory')
 var vIf = require('../public/if')
-var Watcher = require('../../watcher')
+var FragmentFactory = require('../../fragment/factory')
 
 module.exports = {
 
   priority: 1750,
 
-  bind: function () {
-    var el = this.el
-    this.anchor = _.createAnchor('v-partial')
-    _.replace(el, this.anchor)
-    var id = el.getAttribute('name')
-    if (id != null) {
-      // static partial
-      this.insert(id)
-    } else {
-      id = _.getBindAttr(el, 'name')
-      if (id) {
-        this.setupDynamic(id)
-      }
-    }
-  },
+  params: ['name'],
 
-  setupDynamic: function (exp) {
-    var self = this
-    var onNameChange = function (value) {
-      vIf.remove.call(self)
+  // watch changes to name for dynamic partials
+  paramWatchers: {
+    name: function (value) {
+      vIf.remove.call(this)
       if (value) {
-        self.insert(value)
+        this.insert(value)
       }
     }
-    this.nameWatcher = new Watcher(this.vm, exp, onNameChange, {
-      scope: this._scope
-    })
-    onNameChange(this.nameWatcher.value)
+  },
+
+  bind: function () {
+    this.anchor = _.createAnchor('v-partial')
+    _.replace(this.el, this.anchor)
+    this.insert(this.params.name)
   },
 
   insert: function (id) {
@@ -52,8 +39,5 @@ module.exports = {
     if (this.frag) {
       this.frag.destroy()
     }
-    if (this.nameWatcher) {
-      this.nameWatcher.teardown()
-    }
   }
 }

src/directives/element/slot.js

@@ -10,6 +10,8 @@ module.exports = {
 
   priority: 1750,
 
+  params: ['name'],
+
   bind: function () {
     var host = this.vm
     var raw = host.$options._content
@@ -19,7 +21,7 @@ module.exports = {
       return
     }
     var context = host._context
-    var slotName = this.param('name')
+    var slotName = this.params.name
     if (!slotName) {
       // Default content
       var self = this

src/directives/internal/component.js

@@ -5,6 +5,12 @@ module.exports = {
 
   priority: 1500,
 
+  params: [
+    'keep-alive',
+    'transition-mode',
+    'inline-template'
+  ],
+
   /**
    * Setup. Two possible usages:
    *
@@ -17,25 +23,19 @@ module.exports = {
 
   bind: function () {
     if (!this.el.__vue__) {
-      // check keep-alive options.
-      // If yes, instead of destroying the active vm when
-      // hiding (v-if) or switching (dynamic literal) it,
-      // we simply remove it from the DOM and save it in a
-      // cache object, with its constructor id as the key.
-      this.keepAlive = this.param('keep-alive') != null
-
       // check ref
       this.ref = _.findRef(this.el)
       var refs = (this._scope || this.vm).$refs
       if (this.ref && !refs.hasOwnProperty(this.ref)) {
         _.defineReactive(refs, this.ref, null)
       }
-
+      // keep-alive cache
+      this.keepAlive = this.params.keepAlive
       if (this.keepAlive) {
         this.cache = {}
       }
       // check inline-template
-      if (this.param('inline-template') !== null) {
+      if (this.params.inlineTemplate) {
         // extract inline template as a DocumentFragment
         this.inlineTemplate = _.extractContent(this.el, true)
       }
@@ -49,7 +49,6 @@ module.exports = {
         // create a ref anchor
       this.anchor = _.createAnchor('v-component')
       _.replace(this.el, this.anchor)
-      this.transMode = this.param('transition-mode')
       // if static, build right now.
       if (this.literal) {
         this.setComponent(this.expression)
@@ -296,7 +295,7 @@ module.exports = {
     var self = this
     var current = this.childVM
     this.childVM = target
-    switch (self.transMode) {
+    switch (self.params.transitionMode) {
       case 'in-out':
         target.$before(self.anchor, function () {
           self.remove(current, cb)

src/directives/public/bind.js

@@ -29,10 +29,14 @@ module.exports = {
 
   bind: function () {
     var attr = this.arg
+    var tag = this.el.tagName
     // handle interpolation bindings
     if (this.descriptor.interp) {
       // only allow binding on native attributes
-      if (disallowedInterpAttrRE.test(attr)) {
+      if (
+        disallowedInterpAttrRE.test(attr) ||
+        (attr === 'name' && (tag === 'PARTIAL' || tag === 'SLOT'))
+      ) {
         process.env.NODE_ENV !== 'production' && _.warn(
           attr + '="' + this.descriptor.raw + '": ' +
           'attribute interpolation is not allowed in Vue.js ' +