diff --git a/src/generators/dom/visitors/EachBlock.ts b/src/generators/dom/visitors/EachBlock.ts index f5c642f5d1..4be9059e52 100644 --- a/src/generators/dom/visitors/EachBlock.ts +++ b/src/generators/dom/visitors/EachBlock.ts @@ -66,6 +66,7 @@ export default function visitEachBlock( block.builders.init.addBlock(deindent` if ( !${each_block_value}.length ) { ${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} ); + ${each_block_else}.create(); } `); diff --git a/src/generators/server-side-rendering/visitors/EachBlock.ts b/src/generators/server-side-rendering/visitors/EachBlock.ts index b7de6ce9d9..b5b4fe2002 100644 --- a/src/generators/server-side-rendering/visitors/EachBlock.ts +++ b/src/generators/server-side-rendering/visitors/EachBlock.ts @@ -10,7 +10,7 @@ export default function visitEachBlock( ) { const { dependencies, snippet } = block.contextualise(node.expression); - const open = `\${ ${snippet}.map( ${node.index + const open = `\${ ${node.else ? `${snippet}.length ? ` : ''}${snippet}.map( ${node.index ? `( ${node.context}, ${node.index} )` : node.context} => \``; generator.append(open); @@ -36,6 +36,16 @@ export default function visitEachBlock( visit(generator, childBlock, child); }); - const close = `\` ).join( '' )}`; + const close = `\` ).join( '' )`; generator.append(close); + + if (node.else) { + generator.append(` : \``); + node.else.children.forEach((child: Node) => { + visit(generator, block, child); + }); + generator.append(`\``); + } + + generator.append('}'); } diff --git a/test/runtime/samples/each-block-else-starts-empty/_config.js b/test/runtime/samples/each-block-else-starts-empty/_config.js new file mode 100644 index 0000000000..c12ca2c746 --- /dev/null +++ b/test/runtime/samples/each-block-else-starts-empty/_config.js @@ -0,0 +1,21 @@ +export default { + data: { + animals: [], + foo: 'something else' + }, + + html: ` + before +

no animals, but rather something else

+ after + `, + + test ( assert, component, target ) { + component.set({ animals: ['wombat'] }); + assert.htmlEqual( target.innerHTML, ` + before +

wombat

+ after + ` ); + } +}; diff --git a/test/runtime/samples/each-block-else-starts-empty/main.html b/test/runtime/samples/each-block-else-starts-empty/main.html new file mode 100644 index 0000000000..6c13e5fb23 --- /dev/null +++ b/test/runtime/samples/each-block-else-starts-empty/main.html @@ -0,0 +1,7 @@ +before +{{#each animals as animal}} +

{{animal}}

+{{else}} +

no animals, but rather {{foo}}

+{{/each}} +after