fix vuejs#531 content fallback with multiple insertion points

yyx990803 · yyx990803 · commit ee2ae353dae1 · 2014-11-02T12:57:59.000-05:00
diff --git a/src/compile/transclude.js b/src/compile/transclude.js
@@ -94,16 +94,19 @@ function transcludeContent (el) {
   var outlets = getOutlets(el)
   var i = outlets.length
   if (!i) return
-  var outlet, select, j, main
+  var outlet, select, selected, j, main
   // first pass, collect corresponding content
   // for each outlet.
   while (i--) {
     outlet = outlets[i]
     if (rawContent) {
       select = outlet.getAttribute('select')
       if (select) {  // select content
+        selected = rawContent.querySelectorAll(select)
         outlet.content = _.toArray(
-          rawContent.querySelectorAll(select)
+          selected.length
+            ? selected
+            : outlet.childNodes
         )
       } else { // default content
         main = outlet
diff --git a/test/unit/specs/compile/transclude_spec.js b/test/unit/specs/compile/transclude_spec.js
@@ -79,6 +79,15 @@ if (_.inBrowser) {
       expect(res.firstChild.textContent).toBe('fallback')
     })
 
+    it('fallback content with multiple select', function () {
+      el.innerHTML = '<p class="b">select b</p>'
+      options.template = '<content select=".a"><p>fallback a</p></content><content select=".b">fallback b</content>'
+      var res = transclude(el, options)
+      expect(res.childNodes.length).toBe(2)
+      expect(res.firstChild.textContent).toBe('fallback a')
+      expect(res.lastChild.textContent).toBe('select b')
+    })
+
     it('content transclusion with replace', function () {
       el.innerHTML = '<p>hi</p>'
       options.template = '<div><div><content></content></div></div>'
