Преглед изворни кода

add template block support for v-partial

Evan You пре 11 година
родитељ
комит
aa88e6e92c
3 измењених фајлова са 49 додато и 8 уклоњено
  1. 1 1
      changes.md
  2. 26 6
      src/directives/partial.js
  3. 22 1
      test/unit/specs/directives/partial_spec.js

+ 1 - 1
changes.md

@@ -295,7 +295,7 @@ computed: {
 
   When authoring literal directives, you can now provide an `update()` function if you wish to handle it dynamically. If no `update()` is provided the directive will be treated as a static literal and only evaluated once.
 
-  Note that `v-component` is the only directive that supports this.
+  Note that `v-component` and `v-partial` are the only directives that support this.
 
 - #### Directive params
 

+ 26 - 6
src/directives/partial.js

@@ -6,6 +6,14 @@ module.exports = {
   isLiteral: true,
 
   bind: function () {
+    var el = this.el
+    if (el.nodeType !== 8) {
+      el.innerHTML = ''
+    }
+    if (el.tagName === 'TEMPLATE') {
+      this.el = document.createComment('v-partial')
+      _.replace(el, this.el)
+    }
     if (!this._isDynamicLiteral) {
       this.compile(this.expression)
     } 
@@ -25,16 +33,28 @@ module.exports = {
     partial = templateParser.parse(partial, true)
     var el = this.el
     var vm = this.vm
+    var decompile = vm.$compile(partial)
     if (el.nodeType === 8) {
       // comment ref node means inline partial
-      // which can only be static
-      vm.$compile(partial)
-      _.replace(el, partial)
+      var blockStart = partial.firstChild
+      this.decompile = function () {
+        decompile()
+        var node = blockStart
+        var next
+        while (node !== el) {
+          next = node.nextSibling
+          _.remove(node)
+          node = next
+        }
+      }
+      _.before(partial, el)
     } else {
-      // just set innerHTML...
-      el.innerHTML = ''
+      // just append to container
+      this.decompile = function () {
+        decompile()
+        el.innerHTML = ''
+      }
       el.appendChild(partial)
-      this.decompile = vm.$compile(el)
     }
   },
 

+ 22 - 1
test/unit/specs/directives/partial_spec.js

@@ -37,7 +37,7 @@ if (_.inBrowser) {
           b: 'B'
         }
       })
-      expect(el.innerHTML).toBe('<div><p>A</p><p>B</p></div>')
+      expect(el.innerHTML).toBe('<div><p>A</p><p>B</p><!--v-partial--></div>')
     })
 
     it('not found', function () {
@@ -86,5 +86,26 @@ if (_.inBrowser) {
       })
     })
 
+    it('template block partial', function (done) {
+      var vm = new Vue({
+        el: el,
+        template: '<template v-partial="{{test}}"></template>',
+        data: {
+          test: 'p1',
+          msg: 'b'
+        },
+        partials: {
+          p1: 'a {{msg}} c',
+          p2: '<span>1</span><a>2</a>'
+        }
+      })
+      expect(el.innerHTML).toBe('a b c<!--v-partial-->')
+      vm.test = 'p2'
+      _.nextTick(function () {
+        expect(el.innerHTML).toBe('<span>1</span><a>2</a><!--v-partial-->')
+        done()
+      })
+    })
+
   })
 }