Browse Source

support bind-is

Evan You 10 years ago
parent
commit
32f6fd452d
3 changed files with 56 additions and 1 deletions
  1. 9 0
      src/directives/component.js
  2. 11 1
      src/util/component.js
  3. 36 0
      test/unit/specs/directives/component_spec.js

+ 9 - 0
src/directives/component.js

@@ -225,6 +225,15 @@ module.exports = {
       if (this.keepAlive) {
         this.cache[this.Component.cid] = child
       }
+      /* istanbul ignore if */
+      if (process.env.NODE_ENV !== 'production' &&
+          this.el.hasAttribute('transition') &&
+          child._isFragment) {
+        _.warn(
+          'Transitions will not work on a fragment instance. ' +
+          'Template: ' + child.$options.template
+        )
+      }
       return child
     }
   },

+ 11 - 1
src/util/component.js

@@ -15,7 +15,17 @@ exports.checkComponent = function (el, options) {
   if (tag === 'component') {
     // dynamic syntax
     var exp = el.getAttribute('is')
-    el.removeAttribute('is')
+    if (exp != null) {
+      el.removeAttribute('is')
+    } else {
+      exp = el.getAttribute('bind-is')
+      if (exp != null) {
+        // leverage literal dynamic for now.
+        // TODO: make this cleaner
+        exp = '{{' + exp + '}}'
+        el.removeAttribute('bind-is')
+      }
+    }
     return exp
   } else if (!exports.commonTagRE.test(tag)) {
     if (_.resolveAsset(options, 'components', tag)) {

+ 36 - 0
test/unit/specs/directives/component_spec.js

@@ -137,6 +137,42 @@ if (_.inBrowser) {
       })
     })
 
+    it('dynamic (new syntax)', function (done) {
+      var vm = new Vue({
+        el: el,
+        template: '<component bind-is="view" bind-view="view"></component>',
+        data: {
+          view: 'view-a'
+        },
+        components: {
+          'view-a': {
+            template: '<div>AAA</div>',
+            replace: true,
+            data: function () {
+              return { view: 'a' }
+            }
+          },
+          'view-b': {
+            template: '<div>BBB</div>',
+            replace: true,
+            data: function () {
+              return { view: 'b' }
+            }
+          }
+        }
+      })
+      expect(el.innerHTML).toBe('<div view="view-a">AAA</div>')
+      vm.view = 'view-b'
+      _.nextTick(function () {
+        expect(el.innerHTML).toBe('<div view="view-b">BBB</div>')
+        vm.view = ''
+        _.nextTick(function () {
+          expect(el.innerHTML).toBe('')
+          done()
+        })
+      })
+    })
+
     it('keep-alive', function (done) {
       var spyA = jasmine.createSpy()
       var spyB = jasmine.createSpy()