binding.component/jsx) Support partials when an array of JSX is ret…

…urned.
knockout · Jun 26, 2018 · e5ebeae · e5ebeae
1 parent f82eafc
commit e5ebeae
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/packages/tko.binding.component/spec/componentBindingBehaviors.js b/packages/tko.binding.component/spec/componentBindingBehaviors.js
@@ -890,6 +890,23 @@ describe('Components: Component binding', function () {
       o2(undefined)
       expect(testNode.children[0].innerHTML).toEqual('<div><!--[jsx placeholder]--></div>')
     })
+
+    it('inserts a partial when the `template` is an array', function () {
+      class ViewModel extends components.ComponentABC {
+        static get template () {
+          // Passing <div attr={obs}>{o2}</div> through
+          // babel-plugin-transform-jsx will yield:
+          return [
+            { elementName: 'b', attributes: { }, children: ['x'] },
+            { elementName: 'i', attributes: { }, children: ['y'] },
+            { elementName: 'em', attributes: { }, children: ['z'] }
+          ]
+        }
+      }
+      ViewModel.register('test-component')
+      applyBindings(outerViewModel, testNode)
+      expect(testNode.children[0].innerHTML).toEqual('<b>x</b><i>y</i><em>z</em>')
+    })
   })
 
   describe('slots', function () {

diff --git a/packages/tko.binding.component/src/componentBinding.js b/packages/tko.binding.component/src/componentBinding.js
@@ -37,7 +37,10 @@ export default class ComponentBinding extends DescendantBindingHandler {
     if (!template) {
       throw new Error('Component \'' + componentName + '\' has no template')
     }
-    if (template.elementName) {
+    const possibleJsxPartial = Array.isArray(template) && template.length
+    if (possibleJsxPartial && template[0].hasOwnProperty('elementName')) {
+      virtualElements.setDomNodeChildren(element, template.map(jsxToNode))
+    } else if (template.elementName) {
       virtualElements.setDomNodeChildren(element, [jsxToNode(template)])
     } else {
       const clonedNodesArray = cloneNodes(template)