make v-component-id return an Array when used with v-repeat

Author: yyx990803

src/directives/repeat.js

@@ -85,26 +85,28 @@ module.exports = {
 
     bind: function () {
 
-        var self = this,
-            el   = self.el,
-            ctn  = self.container = el.parentNode
+        var el   = this.el,
+            ctn  = this.container = el.parentNode
 
         // extract child VM information, if any
         ViewModel = ViewModel || require('../viewmodel')
-        self.Ctor = self.Ctor || ViewModel
-
+        this.Ctor = this.Ctor || ViewModel
         // extract transition information
-        self.hasTrans   = el.hasAttribute(config.attrs.transition)
+        this.hasTrans = el.hasAttribute(config.attrs.transition)
+        // extract child Id, if any
+        this.childId = utils.attr(el, 'component-id')
 
         // create a comment node as a reference node for DOM insertions
-        self.ref = document.createComment(config.prefix + '-repeat-' + self.key)
-        ctn.insertBefore(self.ref, el)
+        this.ref = document.createComment(config.prefix + '-repeat-' + this.key)
+        ctn.insertBefore(this.ref, el)
         ctn.removeChild(el)
 
-        self.initiated = false
-        self.collection = null
-        self.vms = null
-        self.mutationListener = function (path, arr, mutation) {
+        this.initiated = false
+        this.collection = null
+        this.vms = null
+
+        var self = this
+        this.mutationListener = function (path, arr, mutation) {
             var method = mutation.method
             mutationHandlers[method].call(self, mutation)
             if (method !== 'push' && method !== 'pop') {
@@ -119,31 +121,33 @@ module.exports = {
 
     update: function (collection, init) {
 
-        var self = this
-        self.unbind(true)
+        this.unbind(true)
         // attach an object to container to hold handlers
-        self.container.vue_dHandlers = utils.hash()
+        this.container.vue_dHandlers = utils.hash()
         // if initiating with an empty collection, we need to
         // force a compile so that we get all the bindings for
         // dependency extraction.
-        if (!self.initiated && (!collection || !collection.length)) {
-            self.buildItem()
-            self.initiated = true
+        if (!this.initiated && (!collection || !collection.length)) {
+            this.buildItem()
+            this.initiated = true
+        }
+        collection = this.collection = collection || []
+        this.vms = []
+        if (this.childId) {
+            this.vm.$[this.childId] = this.vms
         }
-        collection = self.collection = collection || []
-        self.vms = []
 
         // listen for collection mutation events
         // the collection has been augmented during Binding.set()
         if (!collection.__observer__) Observer.watchArray(collection, null, new Emitter())
-        collection.__observer__.on('mutate', self.mutationListener)
+        collection.__observer__.on('mutate', this.mutationListener)
 
         // create child-vms and append to DOM
         if (collection.length) {
             for (var i = 0, l = collection.length; i < l; i++) {
-                self.buildItem(collection[i], i)
+                this.buildItem(collection[i], i)
             }
-            if (!init) self.changed()
+            if (!init) this.changed()
         }
     },
 
@@ -154,9 +158,9 @@ module.exports = {
      *  Batched to ensure it's called only once every event loop.
      */
     changed: function () {
+        if (this.queued) return
+        this.queued = true
         var self = this
-        if (self.queued) return
-        self.queued = true
         setTimeout(function () {
             self.compiler.parseDeps()
             self.queued = false
@@ -221,6 +225,9 @@ module.exports = {
     },
 
     unbind: function () {
+        if (this.childId) {
+            delete this.vm.$[this.childId]
+        }
         if (this.collection) {
             this.collection.__observer__.off('mutate', this.mutationListener)
             var i = this.vms.length

test/functional/fixtures/repeated-vms.html

@@ -6,7 +6,7 @@
         <script src="../../../dist/vue.js"></script>
     </head>
     <body>
-        <div class="item" v-repeat="items" v-component="item" v-on="click:click">
+        <div class="item" v-repeat="items" v-component="item" v-component-id="items" v-on="click:click">
             {{msg + ' ' + title}}
         </div>
         <script>
@@ -23,10 +23,15 @@
                 },
                 data: {
                     msg: 'msg'
+                },
+                computed: {
+                    reversed: function () {
+                        return this.title.split('').reverse().join('')
+                    }
                 }
             })
 
-            new Vue({
+            var app = new Vue({
                 el: 'body',
                 data: {
                     items: [

test/functional/specs/repeated-vms.js

@@ -1,4 +1,5 @@
-casper.test.begin('Repeated ViewModels', 7, function (test) {
+/* global app */
+casper.test.begin('Repeated ViewModels', 8, function (test) {
 
     casper
     .start('./fixtures/repeated-vms.html')
@@ -23,6 +24,15 @@ casper.test.begin('Repeated ViewModels', 7, function (test) {
     .thenClick('.item:nth-child(1)', function () {
         test.assertSelectorHasText('.item:nth-child(1)', 'msg a init click click')
     })
+    .then(function () {
+        test.assertEvalEquals(
+            function () {
+                return app.$.items[0].reversed
+            },
+            'a init click click'.split('').reverse().join(''),
+            'should be able to access repeated vms with v-component-id'
+        )
+    })
     .run(function () {
         test.done()
     })