diff --git a/src/generators/dom/visitors/EachBlock.js b/src/generators/dom/visitors/EachBlock.js index 0454c4e6ba..6093aa8811 100644 --- a/src/generators/dom/visitors/EachBlock.js +++ b/src/generators/dom/visitors/EachBlock.js @@ -57,16 +57,28 @@ export default function visitEachBlock ( generator, block, state, node ) { } ` ); - block.builders.update.addBlock( deindent` - if ( !${each_block_value}.length && ${each_block_else} ) { - ${each_block_else}.update( changed, ${params} ); - } else if ( !${each_block_value}.length ) { - ${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} ); - ${each_block_else}.mount( ${anchor}.parentNode, ${anchor} ); - } else if ( ${each_block_else} ) { - ${each_block_else}.destroy( true ); - } - ` ); + if ( node.else.hasUpdateMethod ) { + block.builders.update.addBlock( deindent` + if ( !${each_block_value}.length && ${each_block_else} ) { + ${each_block_else}.update( changed, ${params} ); + } else if ( !${each_block_value}.length ) { + ${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} ); + ${each_block_else}.mount( ${anchor}.parentNode, ${anchor} ); + } else if ( ${each_block_else} ) { + ${each_block_else}.destroy( true ); + } + ` ); + } else { + block.builders.update.addBlock( deindent` + if ( ${each_block_value}.length ) { + if ( ${each_block_else} ) ${each_block_else}.destroy( true ); + } else if ( !${each_block_else} ) { + ${each_block_else} = ${node.else._block.name}( ${params}, ${block.component} ); + ${each_block_else}.mount( ${anchor}.parentNode, ${anchor} ); + } + ` ); + } + block.builders.destroy.addBlock( deindent` if ( ${each_block_else} ) { diff --git a/test/runtime/samples/each-block-dynamic-else-static/_config.js b/test/runtime/samples/each-block-dynamic-else-static/_config.js new file mode 100644 index 0000000000..c3074a7aa5 --- /dev/null +++ b/test/runtime/samples/each-block-dynamic-else-static/_config.js @@ -0,0 +1,29 @@ +export default { + solo: true, + + data: { + animals: [ 'alpaca', 'baboon', 'capybara' ] + }, + + html: ` + <p>alpaca</p> + <p>baboon</p> + <p>capybara</p> + `, + + test ( assert, component, target ) { + component.set({ animals: [] }); + assert.htmlEqual( target.innerHTML, ` + <p>no animals</p> + ` ); + + // trigger an 'update' of the else block, to ensure that + // non-existent update method is not called + component.set({ animals: [] }); + + component.set({ animals: ['wombat'] }); + assert.htmlEqual( target.innerHTML, ` + <p>wombat</p> + ` ); + } +}; diff --git a/test/runtime/samples/each-block-dynamic-else-static/main.html b/test/runtime/samples/each-block-dynamic-else-static/main.html new file mode 100644 index 0000000000..edd88f4705 --- /dev/null +++ b/test/runtime/samples/each-block-dynamic-else-static/main.html @@ -0,0 +1,5 @@ +{{#each animals as animal}} + <p>{{animal}}</p> +{{else}} + <p>no animals</p> +{{/each}} \ No newline at end of file