add parent option

Author: yyx990803

src/compiler.js

@@ -64,21 +64,24 @@ function Compiler (vm, options) {
     def(vm, '$', makeHash())
     def(vm, '$el', el)
     def(vm, '$compiler', compiler)
-    def(vm, '$root', getRoot(compiler).vm)
 
     // set parent VM
     // and register child id on parent
-    var parent = compiler.parentCompiler,
+    var parentVM = options.parent,
         childId = utils.attr(el, 'ref')
-    if (parent) {
-        parent.childCompilers.push(compiler)
-        def(vm, '$parent', parent.vm)
+    if (parentVM) {
+        compiler.parent = parentVM.$compiler
+        parentVM.$compiler.childCompilers.push(compiler)
+        def(vm, '$parent', parentVM)
         if (childId) {
             compiler.childId = childId
-            parent.vm.$[childId] = vm
+            parentVM.$[childId] = vm
         }
     }
 
+    // set root
+    def(vm, '$root', getRoot(compiler).vm)
+
     // setup observer
     compiler.setupObserver()
 
@@ -546,7 +549,7 @@ CompilerProto.bindDirective = function (directive) {
             if (compiler.hasKey(key)) {
                 break
             } else {
-                compiler = compiler.parentCompiler
+                compiler = compiler.parent
             }
         }
         compiler = compiler || this
@@ -717,7 +720,7 @@ CompilerProto.markComputed = function (binding, value) {
  */
 CompilerProto.getOption = function (type, id) {
     var opts = this.options,
-        parent = this.parentCompiler,
+        parent = this.parent,
         globalAssets = config.globalAssets
     return (opts[type] && opts[type][id]) || (
         parent
@@ -844,8 +847,8 @@ CompilerProto.destroy = function () {
         el.removeEventListener(key, delegators[key].handler)
     }
 
-    // remove self from parentCompiler
-    var parent = compiler.parentCompiler,
+    // remove self from parent
+    var parent = compiler.parent,
         childId = compiler.childId
     if (parent) {
         parent.childCompilers.splice(parent.childCompilers.indexOf(compiler), 1)
@@ -877,8 +880,8 @@ CompilerProto.destroy = function () {
  *  shorthand for getting root compiler
  */
 function getRoot (compiler) {
-    while (compiler.parentCompiler) {
-        compiler = compiler.parentCompiler
+    while (compiler.parent) {
+        compiler = compiler.parent
     }
     return compiler
 }

src/directives/repeat.js

@@ -201,10 +201,10 @@ module.exports = {
      */
     dryBuild: function () {
         new this.Ctor({
-            el: this.el.cloneNode(true),
+            el     : this.el.cloneNode(true),
+            parent : this.vm,
             compilerOptions: {
-                repeat: true,
-                parentCompiler: this.compiler
+                repeat: true
             }
         }).$destroy()
         this.initiated = true
@@ -265,11 +265,11 @@ module.exports = {
             data.$index = index
             // initialize the new VM
             item = new this.Ctor({
-                el: el,
-                data: data,
+                el     : el,
+                data   : data,
+                parent : this.vm,
                 compilerOptions: {
-                    repeat: true,
-                    parentCompiler: this.compiler
+                    repeat: true
                 }
             })
             // for non-object values, listen for value change

src/directives/with.js

@@ -47,14 +47,14 @@ module.exports = {
             data[this.arg] = value
         }
         this.subVM = new Ctor({
-            el: this.el,
-            data: data,
+            el     : this.el,
+            data   : data,
+            parent : this.vm,
             compilerOptions: {
                 // it is important to delay the ready hook
                 // so that when it's called, all `v-with` wathcers
                 // would have been set up.
-                delayReady: !this.last,
-                parentCompiler: this.compiler
+                delayReady: !this.last
             }
         })
     },

src/exp-parser.js

@@ -61,7 +61,7 @@ function getRel (path, compiler) {
         if (compiler.hasKey(path)) {
             break
         } else {
-            compiler = compiler.parentCompiler
+            compiler = compiler.parent
             dist++
         }
     }

src/viewmodel.js

@@ -99,7 +99,7 @@ def(VMProto, '$broadcast', function () {
 def(VMProto, '$dispatch', function () {
     var compiler = this.$compiler,
         emitter = compiler.emitter,
-        parent = compiler.parentCompiler
+        parent = compiler.parent
     emitter.emit.apply(emitter, arguments)
     if (parent) {
         parent.vm.$dispatch.apply(parent.vm, arguments)

test/functional/fixtures/nested-vms.html

@@ -1,5 +1,6 @@
 <style type="text/css">
-    div:not(#grandpa) {
+    man, offspring {
+        display: block;
         padding-left: 15px;
     }
     p {
@@ -14,61 +15,54 @@
     }
 </style>
 
-<div id="grandpa" data-name="Andy" data-family="Johnson">
+<meta charset="utf8">
+<div id="grandpa" name="Andy">
     <p class="ancestor">{{name}} {{family}}</p>
 
-    <div v-component="man" data-name="Jack">
+    <man name="Jack">
         <p class="jack">{{name}}, son of {{$parent.name}}</p>
 
-        <div v-component="man" data-name="Mike">
+        <man name="Mike">
             <p class="mike">{{name}}, son of {{$parent.name}}</p>
 
-            <div v-component="offspring" data-name="Tim" class="tim">
-            </div>
+            <offspring name="Tim" class="tim"></offspring>
 
-            <div v-component="offspring" data-name="Tom" class="tom">
-            </div>
-        </div>
+            <offspring name="Tom" class="tom"></offspring>
+        </man>
 
-        <div v-component="man" data-name="Jason">
+        <man name="Jason">
             <p class="jason">{{name}}, son of {{$parent.name}}</p>
 
-            <div v-component="offspring" data-name="Andrew" class="andrew">
-            </div>
-        </div>
-    </div>
+            <offspring name="Andrew" class="andrew"></offspring>
+        </man>
+    </man>
 </div>
 
-<script type="text/v-template" id="v-template-offspring">
+<script type="text/x-template" id="offspring-template">
     <p>{{name}}, son of {{$parent.name}}, grandson of {{$parent.$parent.name}}, great-grandson of {{$root.name}}, and offspring of family {{family}}.</p>
 </script>
 
 <script src="../../../dist/vue.js"></script>
 <script>
-    Vue.config({ debug: true })
+    //Vue.config({ debug: true })
 
     var Man = Vue.extend({
-        created: function () {
-            this.name = this.$el.dataset.name
-            console.log(this.$el)
-            console.log(this.name)
-            var family = this.$el.dataset.family
-            if (family) {
-                this.family = family
-            }
-        }
+        paramAttributes: ['name']
     })
 
     var Offspring = Man.extend({
-        template: document.getElementById('v-template-offspring').innerHTML.trim()
+        template: '#offspring-template'
     })
 
     Vue
         .component('man', Man)
         .component('offspring', Offspring)
 
     new Man({
-        el: '#grandpa'
+        el: '#grandpa',
+        data: {
+            family: 'Johnson'
+        }
     })
 
 </script>

test/unit/specs/api.js

@@ -634,6 +634,41 @@ describe('UNIT: API', function () {
 
             })
 
+            describe('parent', function () {
+                
+                it('should create parent-child relation between VMs', function () {
+                    
+                    var parent = new Vue({
+                        data: {
+                            test: 'from parent'
+                        }
+                    })
+
+                    var child = new Vue({
+                        parent: parent,
+                        template: '{{test}}'
+                    })
+
+                    assert.strictEqual(child.$el.textContent, 'from parent')
+
+                    var dispatched = false,
+                        broadcasted = false
+                    parent.$on('dispatch', function () {
+                        dispatched = true
+                    })
+                    child.$on('broadcast', function () {
+                        broadcasted = true
+                    })
+                    parent.$broadcast('broadcast')
+                    child.$dispatch('dispatch')
+
+                    assert.ok(dispatched)
+                    assert.ok(broadcasted)
+
+                })
+
+            })
+
             describe('directives', function () {
 
                 it('should allow the VM to use private directives', function (done) {

test/unit/specs/viewmodel.js

@@ -457,7 +457,7 @@ describe('UNIT: ViewModel', function () {
             }],
             bindings: bindingsMock,
             childId: 'test',
-            parentCompiler: {
+            parent: {
                 childCompilers: [],
                 vm: {
                     $: {
@@ -487,7 +487,7 @@ describe('UNIT: ViewModel', function () {
             }
         }
 
-        compilerMock.parentCompiler.childCompilers.push(compilerMock)
+        compilerMock.parent.childCompilers.push(compilerMock)
 
         destroy.call(compilerMock)
 
@@ -521,8 +521,8 @@ describe('UNIT: ViewModel', function () {
             assert.ok(bindingUnbindCalled)
         })
 
-        it('should remove self from parentCompiler', function () {
-            var parent = compilerMock.parentCompiler
+        it('should remove self from parent', function () {
+            var parent = compilerMock.parent
             assert.ok(parent.childCompilers.indexOf(compilerMock), -1)
             assert.strictEqual(parent.vm.$[compilerMock.childId], undefined)
         })