From e1ee7574bdc9801d1f82565b8e657bd9a24e53d0 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 24 Jul 2017 22:01:28 -0400 Subject: [PATCH 1/2] failing test for #711 --- .../binding-select-in-yield/Modal.html | 20 +++++++ .../binding-select-in-yield/_config.js | 52 +++++++++++++++++++ .../samples/binding-select-in-yield/main.html | 23 ++++++++ 3 files changed, 95 insertions(+) create mode 100644 test/runtime/samples/binding-select-in-yield/Modal.html create mode 100644 test/runtime/samples/binding-select-in-yield/_config.js create mode 100644 test/runtime/samples/binding-select-in-yield/main.html diff --git a/test/runtime/samples/binding-select-in-yield/Modal.html b/test/runtime/samples/binding-select-in-yield/Modal.html new file mode 100644 index 0000000000..53ec5fb2cb --- /dev/null +++ b/test/runtime/samples/binding-select-in-yield/Modal.html @@ -0,0 +1,20 @@ +{{#if !hidden}} + {{ yield }} +{{/if}} + + \ No newline at end of file diff --git a/test/runtime/samples/binding-select-in-yield/_config.js b/test/runtime/samples/binding-select-in-yield/_config.js new file mode 100644 index 0000000000..e8ef296a33 --- /dev/null +++ b/test/runtime/samples/binding-select-in-yield/_config.js @@ -0,0 +1,52 @@ +export default { + html: ``, + + data: { + letter: 'b' + }, + + test ( assert, component, target, window ) { + component.refs.modal.toggle(); + + assert.htmlEqual(target.innerHTML, ` + b + + + `); + + const select = target.querySelector('select'); + const change = new window.MouseEvent('change'); + + select.options[2].selected = true; + select.dispatchEvent(change); + + assert.htmlEqual(target.innerHTML, ` + c + + + `); + + component.refs.modal.toggle(); + component.refs.modal.toggle(); + + assert.ok(select.options[2].selected); + + assert.htmlEqual(target.innerHTML, ` + c + + + `); + } +}; diff --git a/test/runtime/samples/binding-select-in-yield/main.html b/test/runtime/samples/binding-select-in-yield/main.html new file mode 100644 index 0000000000..6ed86dc288 --- /dev/null +++ b/test/runtime/samples/binding-select-in-yield/main.html @@ -0,0 +1,23 @@ + + {{letter}} + + + + \ No newline at end of file From 850d66411f8ec8a966682fadda3a74403a5cbe96 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 24 Jul 2017 23:02:01 -0400 Subject: [PATCH 2/2] ensure data is up to date when re-rendering yield blocks (fixes #711) --- src/generators/dom/visitors/Element/Binding.ts | 6 +++++- .../samples/binding-select-in-yield/_config.js | 13 ++++++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts index 37482f1986..4979340b4f 100644 --- a/src/generators/dom/visitors/Element/Binding.ts +++ b/src/generators/dom/visitors/Element/Binding.ts @@ -7,6 +7,7 @@ import Block from '../../Block'; import { Node } from '../../../../interfaces'; import { State } from '../../interfaces'; import getObject from '../../../../utils/getObject'; +import getTailSnippet from '../../../../utils/getTailSnippet'; export default function visitBinding( generator: DomGenerator, @@ -83,8 +84,11 @@ export default function visitBinding( break; }`; + const { name } = getObject(attribute.value); + const tailSnippet = getTailSnippet(attribute.value); + updateElement = deindent` - var ${value} = ${snippet}; + var ${value} = #component.get( '${name}' )${tailSnippet}; for ( var #i = 0; #i < ${state.parentNode}.options.length; #i += 1 ) { var ${option} = ${state.parentNode}.options[#i]; diff --git a/test/runtime/samples/binding-select-in-yield/_config.js b/test/runtime/samples/binding-select-in-yield/_config.js index e8ef296a33..4ff851d33f 100644 --- a/test/runtime/samples/binding-select-in-yield/_config.js +++ b/test/runtime/samples/binding-select-in-yield/_config.js @@ -23,6 +23,13 @@ export default { select.options[2].selected = true; select.dispatchEvent(change); + assert.equal(component.get('letter'), 'c'); + + assert.deepEqual(Array.from(select.options).map(o => o.selected), [ + false, + false, + true + ]); assert.htmlEqual(target.innerHTML, ` c @@ -37,7 +44,11 @@ export default { component.refs.modal.toggle(); component.refs.modal.toggle(); - assert.ok(select.options[2].selected); + assert.deepEqual(Array.from(select.options).map(o => o.selected), [ + false, + false, + true + ]); assert.htmlEqual(target.innerHTML, ` c