From 0dac01ce4b98e64620a9d2334fd8e2a3fdc5d206 Mon Sep 17 00:00:00 2001 From: Rich-Harris Date: Tue, 18 Apr 2017 22:07:43 -0400 Subject: [PATCH 1/2] failing test for #498 --- .../_config.js | 78 +++++++++++++++++++ .../main.html | 13 ++++ 2 files changed, 91 insertions(+) create mode 100644 test/runtime/samples/binding-input-checkbox-group-outside-each/_config.js create mode 100644 test/runtime/samples/binding-input-checkbox-group-outside-each/main.html diff --git a/test/runtime/samples/binding-input-checkbox-group-outside-each/_config.js b/test/runtime/samples/binding-input-checkbox-group-outside-each/_config.js new file mode 100644 index 0000000000..bff66c903b --- /dev/null +++ b/test/runtime/samples/binding-input-checkbox-group-outside-each/_config.js @@ -0,0 +1,78 @@ +const values = [ + { name: 'Alpha' }, + { name: 'Beta' }, + { name: 'Gamma' } +]; + +export default { + data: { + values, + selected: [ values[1] ] + }, + + 'skip-ssr': true, // values are rendered as [object Object] + + html: ` + + + + + + +

Beta

`, + + test ( assert, component, target, window ) { + const inputs = target.querySelectorAll( 'input' ); + assert.equal( inputs[0].checked, false ); + assert.equal( inputs[1].checked, true ); + assert.equal( inputs[2].checked, false ); + + const event = new window.Event( 'change' ); + + inputs[0].checked = true; + inputs[0].dispatchEvent( event ); + + assert.htmlEqual( target.innerHTML, ` + + + + + + +

Alpha, Beta

+ ` ); + + component.set({ selected: [ values[1], values[2] ] }); + assert.equal( inputs[0].checked, false ); + assert.equal( inputs[1].checked, true ); + assert.equal( inputs[2].checked, true ); + + assert.htmlEqual( target.innerHTML, ` + + + + + + +

Beta, Gamma

+ ` ); + } +}; diff --git a/test/runtime/samples/binding-input-checkbox-group-outside-each/main.html b/test/runtime/samples/binding-input-checkbox-group-outside-each/main.html new file mode 100644 index 0000000000..126f7b79c1 --- /dev/null +++ b/test/runtime/samples/binding-input-checkbox-group-outside-each/main.html @@ -0,0 +1,13 @@ + + + + + + +

{{selected.map( function ( value ) { return value.name; }).join( ', ' ) }}

\ No newline at end of file From 629584d7e9390e1820e22312805c2fe7c9b946f8 Mon Sep 17 00:00:00 2001 From: Rich-Harris Date: Tue, 18 Apr 2017 22:10:53 -0400 Subject: [PATCH 2/2] =?UTF-8?q?use=20string=20keypath,=20not=20sourcemappa?= =?UTF-8?q?ble=20snippet,=20for=20determining=20binding=20groups=20?= =?UTF-8?q?=E2=80=94=20fixes=20#498?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/generators/dom/visitors/Element/Binding.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/generators/dom/visitors/Element/Binding.js b/src/generators/dom/visitors/Element/Binding.js index e88fe8df43..7e405f1965 100644 --- a/src/generators/dom/visitors/Element/Binding.js +++ b/src/generators/dom/visitors/Element/Binding.js @@ -4,7 +4,7 @@ import getSetter from '../shared/binding/getSetter.js'; import getStaticAttributeValue from './getStaticAttributeValue.js'; export default function visitBinding ( generator, block, state, node, attribute ) { - const { name, keypath } = flattenReference( attribute.value ); + const { name, keypath, parts } = flattenReference( attribute.value ); const { snippet, contexts, dependencies } = block.contextualise( attribute.value ); if ( dependencies.length > 1 ) throw new Error( 'An unexpected situation arose. Please raise an issue at https://github.com/sveltejs/svelte/issues — thanks!' ); @@ -17,7 +17,7 @@ export default function visitBinding ( generator, block, state, node, attribute const handler = block.getUniqueName( `${state.parentNode}_${eventName}_handler` ); const isMultipleSelect = node.name === 'select' && node.attributes.find( attr => attr.name.toLowerCase() === 'multiple' ); // TODO use getStaticAttributeValue const type = getStaticAttributeValue( node, 'type' ); - const bindingGroup = attribute.name === 'group' ? getBindingGroup( generator, keypath ) : null; + const bindingGroup = attribute.name === 'group' ? getBindingGroup( generator, parts.join( '.' ) ) : null; const value = getBindingValue( generator, block, state, node, attribute, isMultipleSelect, bindingGroup, type ); let setter = getSetter({ block, name, keypath, context: '_svelte', attribute, dependencies, value });