fix content transclusion inside v-if (fix #736)

Author: yyx990803

src/directives/if.js

@@ -12,11 +12,15 @@ module.exports = {
       this.end = document.createComment('v-if-end')
       _.replace(el, this.end)
       _.before(this.start, this.end)
+
+      // Note: content transclusion is not available for
+      // <template> blocks
       if (el.tagName === 'TEMPLATE') {
         this.template = templateParser.parse(el, true)
       } else {
         this.template = document.createDocumentFragment()
-        this.template.appendChild(el)
+        this.template.appendChild(templateParser.clone(el))
+        this.checkContent()
       }
       // compile the nested partial
       this.linker = compile(
@@ -33,26 +37,50 @@ module.exports = {
     }
   },
 
+  // check if there are any content nodes from parent.
+  // these nodes are compiled by the parent and should
+  // not be cloned during a re-compilation - otherwise the
+  // parent directives bound to them will no longer work.
+  // (see #736)
+  checkContent: function () {
+    var el = this.el
+    for (var i = 0; i < el.childNodes.length; i++) {
+      var node = el.childNodes[i]
+      // _isContent is a flag set in instance/compile
+      // after the raw content has been compiled by parent
+      if (node._isContent) {
+        ;(this.contentNodes = this.contentNodes || []).push(node)
+        ;(this.contentPositions = this.contentPositions || []).push(i)
+      }
+    }
+  },
+
   update: function (value) {
     if (this.invalid) return
     if (value) {
-      this.insert()
+      // avoid duplicate compiles, since update() can be
+      // called with different truthy values
+      if (!this.unlink) {
+        var frag = templateParser.clone(this.template)
+        // persist content nodes from parent.
+        if (this.contentNodes) {
+          var el = frag.childNodes[0]
+          for (var i = 0, l = this.contentNodes.length; i < l; i++) {
+            var node = this.contentNodes[i]
+            var j = this.contentPositions[i]
+            el.replaceChild(node, el.childNodes[j])
+          }
+        }
+        this.compile(frag)
+      }
     } else {
       this.teardown()
     }
   },
 
-  insert: function () {
-    // avoid duplicate inserts, since update() can be
-    // called with different truthy values
-    if (!this.unlink) {
-      this.compile(this.template) 
-    }
-  },
-
-  compile: function (template) {
+  // NOTE: this function is shared in v-partial
+  compile: function (frag) {
     var vm = this.vm
-    var frag = templateParser.clone(template)
     var originalChildLength = vm._children.length
     this.unlink = this.linker
       ? this.linker(vm, frag)
@@ -66,6 +94,7 @@ module.exports = {
     }
   },
 
+  // NOTE: this function is shared in v-partial
   teardown: function () {
     if (!this.unlink) return
     transition.blockRemove(this.start, this.end, this.vm)

src/directives/partial.js

@@ -37,7 +37,7 @@ module.exports = {
     var partial = this.vm.$options.partials[id]
     _.assertAsset(partial, 'partial', id)
     if (partial) {
-      this.compile(templateParser.parse(partial))
+      this.compile(templateParser.parse(partial, true))
     }
   }
 

src/instance/compile.js

@@ -44,6 +44,13 @@ exports._compile = function (el) {
           compile(content, parentOptions, true)
         // call content linker now, before transclusion
         this._contentUnlinkFn = contentLinkFn(parent, content)
+        // mark all compiled nodes as transcluded, so that
+        // directives that do partial compilation, e.g. v-if
+        // and v-partial can detect them and persist them
+        // through re-compilations.
+        for (var i = 0; i < content.childNodes.length; i++) {
+          content.childNodes[i]._isContent = true
+        }
         this._transCpnts = parent._children.slice(ol)
       }
       // tranclude, this possibly replaces original

test/unit/specs/directives/if_spec.js

@@ -180,5 +180,37 @@ if (_.inBrowser) {
       expect(_.warn).toHaveBeenCalled()
     })
 
+    it('v-if with content transclusion', function (done) {
+      var vm = new Vue({
+        el: el,
+        data: {
+          a: 1,
+          show: true
+        },
+        template: '<div v-component="test" show="{{show}}">{{a}}</div>',
+        components: {
+          test: {
+            paramAttributes: ['show'],
+            template: '<div v-if="show"><content></cotent></div>'
+          }
+        }
+      })
+      expect(el.textContent).toBe('1')
+      vm.a = 2
+      _.nextTick(function () {
+        expect(el.textContent).toBe('2')
+        vm.show = false
+        _.nextTick(function () {
+          expect(el.textContent).toBe('')
+          vm.show = true
+          vm.a = 3
+          _.nextTick(function () {
+            expect(el.textContent).toBe('3')
+            done()
+          })
+        })
+      })
+    })
+
   })
 }