diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts index bcdaf5a3d6..83647953b4 100644 --- a/src/compile/render-dom/wrappers/Element/index.ts +++ b/src/compile/render-dom/wrappers/Element/index.ts @@ -163,13 +163,16 @@ export default class ElementWrapper extends Wrapper { block.addAnimation(); } - if (node.classes) { - node.classes.forEach(({ expression }) => { - if (expression) { - block.addDependencies(expression.dependencies); - } - }); - } + // add directive and handler dependencies + [node.animation, node.outro, ...node.actions, ...node.classes].forEach(directive => { + if (directive && directive.expression) { + block.addDependencies(directive.expression.dependencies); + } + }); + + node.handlers.forEach(handler => { + block.addDependencies(handler.dependencies); + }); if (this.parent) { if (node.actions.length > 0) this.parent.cannotUseInnerHTML(); diff --git a/test/runtime/samples/event-handler-each-context/_config.js b/test/runtime/samples/event-handler-each-context/_config.js new file mode 100644 index 0000000000..73358545d3 --- /dev/null +++ b/test/runtime/samples/event-handler-each-context/_config.js @@ -0,0 +1,21 @@ +export default { + data: { + items: [ + 'whatever' + ], + foo: 'wrong', + bar: 'right' + }, + + test(assert, component, target, window) { + const button = target.querySelector('button'); + const event = new window.MouseEvent('click'); + + button.dispatchEvent(event); + assert.equal(component.get().foo, 'right'); + + component.set({ bar: 'left' }); + button.dispatchEvent(event); + assert.equal(component.get().foo, 'left'); + } +}; diff --git a/test/runtime/samples/event-handler-each-context/main.html b/test/runtime/samples/event-handler-each-context/main.html new file mode 100644 index 0000000000..830bbce47e --- /dev/null +++ b/test/runtime/samples/event-handler-each-context/main.html @@ -0,0 +1,5 @@ +{#each items as item} + +{/each} + +
foo: {foo}
\ No newline at end of file