remove v-with

Author: yyx990803

component.json

@@ -38,13 +38,13 @@
     "src/directives/model/radio.js",
     "src/directives/model/select.js",
     "src/directives/on.js",
+    "src/directives/prop.js",
     "src/directives/ref.js",
     "src/directives/repeat.js",
     "src/directives/show.js",
     "src/directives/style.js",
     "src/directives/text.js",
     "src/directives/transition.js",
-    "src/directives/with.js",
     "src/filters/array-filters.js",
     "src/filters/index.js",
     "src/instance/compile.js",

examples/svg/index.html

@@ -24,7 +24,7 @@
     <div id="demo">
       <!-- Use the component -->
       <svg width="200" height="200">
-        <g v-component="polygraph" v-with="stats:stats"></g>
+        <g v-component="polygraph" stats="{{stats}}"></g>
       </svg>
       <!-- controls -->
       <div v-repeat="stats">

examples/svg/svg.js

@@ -10,6 +10,7 @@ var stats = [
 
 // A resusable polygon graph component
 Vue.component('polygraph', {
+  props: ['stats'],
   template: '#polygraph-template',
   computed: {
     // a computed property for the polygon's points

examples/tree/index.html

@@ -46,7 +46,7 @@
     <ul id="demo">
       <li class="item"
         v-component="item"
-        v-with="model: treeData">
+        model="{{treeData}}">
       </li>
     </ul>
 

examples/tree/tree.js

@@ -30,6 +30,7 @@ var data = {
 
 // define the item component
 Vue.component('item', {
+  props: ['model'],
   template: '#item-template',
   data: function () {
     return {

src/compiler/compile.js

@@ -4,6 +4,10 @@ var textParser = require('../parsers/text')
 var dirParser = require('../parsers/directive')
 var templateParser = require('../parsers/template')
 
+// internal directives
+var propDef = require('../directives/prop')
+// var componentDef = require('../directives/component')
+
 module.exports = compile
 
 /**
@@ -108,12 +112,11 @@ function teardownDirs (vm, dirs, destroying) {
 
 /**
  * Compile the root element of a component. There are
- * 4 types of things to process here:
+ * 3 types of things to process here:
  * 
  * 1. props on parent container (child scope)
- * 2. v-with on parent container (child scope)
- * 3. other attrs on parent container (parent scope)
- * 4. attrs on the component template root node, if
+ * 2. other attrs on parent container (parent scope)
+ * 3. attrs on the component template root node, if
  *    replace:true (child scope)
  *
  * Also, if this is a block instance, we only need to
@@ -129,37 +132,25 @@ function compileRoot (el, options) {
   var containerAttrs = options._containerAttrs
   var replacerAttrs = options._replacerAttrs
   var props = options.props
-  var propsLinkFn, withLinkFn, parentLinkFn, replacerLinkFn
+  var propsLinkFn, parentLinkFn, replacerLinkFn
   // 1. props
   propsLinkFn = props
-    ? compileProps(el, containerAttrs, props, options)
+    ? compileProps(el, containerAttrs, props)
     : null
-  // 2. v-with
-  var withName = config.prefix + 'with'
-  var withVal = containerAttrs && containerAttrs[withName]
-  if (withVal) {
-    containerAttrs[withName] = null
-    withLinkFn = makeNodeLinkFn([{
-      name: 'with',
-      descriptors: dirParser.parse(withVal),
-      def: options.directives['with']
-    }])
-  }
   if (!isBlock) {
-    // 3. container attributes
+    // 2. container attributes
     if (containerAttrs) {
       parentLinkFn = compileDirectives(containerAttrs, options)
     }
     if (replacerAttrs) {
-      // 4. replacer attributes
+      // 3. replacer attributes
       replacerLinkFn = compileDirectives(replacerAttrs, options)
     }
   }
   return function rootLinkFn (vm, el, host) {
-    // explicitly passing null to props and v-with
+    // explicitly passing null to props
     // linkers because they don't need a real element
     if (propsLinkFn) propsLinkFn(vm, null)
-    if (withLinkFn) withLinkFn(vm, null)
     if (parentLinkFn) parentLinkFn(vm.$parent, el, host)
     if (replacerLinkFn) replacerLinkFn(vm, el, host)
   }
@@ -384,14 +375,13 @@ function makeChildLinkFn (linkFns) {
  * @param {Element|DocumentFragment} el
  * @param {Object} attrs
  * @param {Array} propNames
- * @param {Object} options
  * @return {Function} propsLinkFn
  */
 
-function compileProps (el, attrs, propNames, options) {
+function compileProps (el, attrs, propNames) {
   var props = []
   var i = propNames.length
-  var name, value, param
+  var name, value, prop
   while (i--) {
     name = propNames[i]
     if (/[A-Z]/.test(name)) {
@@ -404,8 +394,9 @@ function compileProps (el, attrs, propNames, options) {
       )
     }
     value = attrs[name]
-    if (value !== null) {
-      param = {
+    /* jshint eqeqeq:false */
+    if (value != null) {
+      prop = {
         name: name,
         value: value
       }
@@ -415,53 +406,44 @@ function compileProps (el, attrs, propNames, options) {
           el.removeAttribute(name)
         }
         attrs[name] = null
-        param.dynamic = true
-        param.value = textParser.tokensToExp(tokens)
-        param.oneTime = tokens.length === 1 && tokens[0].oneTime
+        prop.dynamic = true
+        prop.value = textParser.tokensToExp(tokens)
+        prop.oneTime = tokens.length === 1 && tokens[0].oneTime
       }
-      props.push(param)
+      props.push(prop)
     }
   }
-  return makeParamsLinkFn(props, options)
+  return makePropsLinkFn(props)
 }
 
 /**
- * Build a function that applies param attributes to a vm.
+ * Build a function that applies props to a vm.
  *
  * @param {Array} props
- * @param {Object} options
  * @return {Function} propsLinkFn
  */
 
 var dataAttrRE = /^data-/
 
-function makeParamsLinkFn (props, options) {
-  var def = options.directives['with']
+function makePropsLinkFn (props) {
   return function propsLinkFn (vm, el) {
     var i = props.length
-    var param, path
+    var prop, path
     while (i--) {
-      param = props[i]
+      prop = props[i]
       // props could contain dashes, which will be
       // interpreted as minus calculations by the parser
       // so we need to wrap the path here
-      path = _.camelize(param.name.replace(dataAttrRE, ''))
-      if (param.dynamic) {
-        if (param.oneTime) {
-          vm.$set(path, vm.$parent.$get(param.value))
-        } else {
-          // dynamic param attribtues are bound as v-with.
-          // we can directly duck the descriptor here beacuse
-          // param attributes cannot use expressions or
-          // filters.
-          vm._bindDir('with', el, {
-            arg: path,
-            expression: param.value
-          }, def)
-        }
+      path = _.camelize(prop.name.replace(dataAttrRE, ''))
+      if (prop.dynamic) {
+        vm._bindDir('prop', el, {
+          arg: path,
+          expression: prop.value,
+          oneWay: prop.oneTime
+        }, propDef)
       } else {
         // just set once
-        vm.$set(path, param.value)
+        vm.$set(path, prop.value)
       }
     }
   }

src/directive.js

@@ -33,6 +33,7 @@ function Directive (name, el, vm, descriptor, def, host) {
   this.arg = descriptor.arg
   this.filters = _.resolveFilters(vm, descriptor.filters)
   // private
+  this._descriptor = descriptor
   this._host = host
   this._locked = false
   this._bound = false

src/directives/component.js

@@ -3,6 +3,7 @@ var templateParser = require('../parsers/template')
 
 module.exports = {
 
+  _internal: true,
   isLiteral: true,
 
   /**

src/directives/index.js

@@ -14,11 +14,14 @@ exports.transition = require('./transition')
 exports.on         = require('./on')
 exports.model      = require('./model')
 
-// child vm directives
-exports.component  = require('./component')
+// logic control directives
 exports.repeat     = require('./repeat')
 exports['if']      = require('./if')
 
 // child vm communication directives
-exports['with']    = require('./with')
-exports.events     = require('./events')
+exports.events     = require('./events')
+
+// internal directives that should not be used directly
+// but we still want to expose them for advanced usage.
+exports.component = require('./component')
+exports._prop      = require('./prop')

src/directives/prop.js

@@ -0,0 +1,72 @@
+var _ = require('../util')
+var Watcher = require('../watcher')
+var expParser = require('../parsers/expression')
+
+module.exports = {
+
+  _internal: true,
+
+  bind: function () {
+
+    var child = this.vm
+    var parent = child.$parent
+    var childKey = this.arg
+    var parentKey = this.expression
+
+    // simple lock to avoid circular updates.
+    // without this it would stabilize too, but this makes
+    // sure it doesn't cause other watchers to re-evaluate.
+    var locked = false
+    var lock = function () {
+      locked = true
+      _.nextTick(unlock)
+    }
+    var unlock = function () {
+      locked = false
+    }
+
+    this.parentWatcher = new Watcher(
+      parent,
+      parentKey,
+      function (val) {
+        if (!locked) {
+          lock()
+          child.$set(childKey, val)
+        }
+      }
+    )
+    
+    // set the child initial value first, before setting
+    // up the child watcher to avoid triggering it
+    // immediately.
+    child.$set(childKey, this.parentWatcher.value)
+
+    // only setup two-way binding if this is not a one-way
+    // binding, and the parentKey is a "settable" simple path.
+    if (
+      !this._descriptor.oneWay &&
+      expParser.isSimplePath(parentKey)
+    ) {
+      this.childWatcher = new Watcher(
+        child,
+        childKey,
+        function (val) {
+          if (!locked) {
+            lock()
+            parent.$set(parentKey, val)
+          }
+        }
+      )
+    }
+  },
+
+  unbind: function () {
+    if (this.parentWatcher) {
+      this.parentWatcher.teardown()
+    }
+    if (this.childWatcher) {
+      this.childWatcher.teardown()
+    }
+  }
+
+}