Merge pull request #299 from sveltejs/gh-290-b

[WIP] failing tests for second bug in #290

Author: Rich-Harris

src/generators/dom/visitors/Component.js

@@ -96,9 +96,7 @@ export default {
 
 			if ( local.bindings.length ) {
 				const bindings = local.bindings.map( binding => {
-					const parts = binding.value.split( '.' );
-					const tail = parts.pop();
-					return `if ( '${tail}' in ${parts.join( '.' )} ) ${name}_initialData.${binding.name} = ${binding.value};`;
+					return `if ( ${binding.prop} in ${binding.obj} ) ${name}_initialData.${binding.name} = ${binding.value};`;
 				});
 
 				statements.push( bindings.join( '\n' ) );

src/generators/dom/visitors/attributes/binding/index.js

@@ -11,10 +11,21 @@ export default function createBinding ( generator, node, attribute, current, loc
 	if ( contextual ) local.allUsedContexts.add( parts[0] );
 
 	if ( local.isComponent ) {
-		local.bindings.push({
-			name: attribute.name,
-			value: contextual ? attribute.value : `root.${attribute.value}`
-		});
+		let obj;
+		let prop;
+		let value;
+
+		if ( contextual ) {
+			obj = current.listNames[ parts[0] ];
+			prop = current.indexNames[ parts[0] ];
+			value = attribute.value;
+		} else {
+			prop = `'${parts.slice( -1 )}'`;
+			obj = parts.length > 1 ? `root.${parts.slice( 0, -1 ).join( '.' )}` : `root`;
+			value = `root.${attribute.value}`;
+		}
+
+		local.bindings.push({ name: attribute.name, value, obj, prop });
 	}
 
 	const handler = current.getUniqueName( `${local.name}ChangeHandler` );
@@ -59,9 +70,11 @@ export default function createBinding ( generator, node, attribute, current, loc
 		const listName = current.listNames[ parts[0] ];
 		const indexName = current.indexNames[ parts[0] ];
 
+		const context = local.isComponent ? `_context` : `__svelte`;
+
 		setter = deindent`
-			var list = this.__svelte.${listName};
-			var index = this.__svelte.${indexName};
+			var list = this.${context}.${listName};
+			var index = this.${context}.${indexName};
 			list[index]${parts.slice( 1 ).map( part => `.${part}` ).join( '' )} = ${value};
 
 			component._set({ ${prop}: component.get( '${prop}' ) });

test/generator/component-binding-each-nested/Widget.html

@@ -0,0 +1 @@
+<input bind:value>

test/generator/component-binding-each-nested/_config.js

@@ -0,0 +1,22 @@
+export default {
+	html: `
+		<input><input><input>
+		<p>foo, bar, baz</p>
+	`,
+
+	test ( assert, component, target, window ) {
+		const event = new window.MouseEvent( 'input' );
+		const inputs = target.querySelectorAll( 'input' );
+
+		inputs[0].value = 'blah';
+		inputs[0].dispatchEvent( event );
+
+		assert.deepEqual( component.get( 'a' ), [{ name: 'blah' }, { name: 'bar' }, { name: 'baz' }] );
+		assert.htmlEqual( target.innerHTML, `
+			<input><input><input>
+			<p>blah, bar, baz</p>
+		` );
+		
+		component.teardown();
+	}
+};

test/generator/component-binding-each-nested/main.html

@@ -0,0 +1,22 @@
+{{#each a as x}}
+	<Widget bind:value='x.name'/>
+{{/each}}
+
+<p>{{a.map(getName).join(', ')}}</p>
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		data () {
+			return {
+				a: [{ name: 'foo' }, { name: 'bar' }, { name: 'baz' }],
+				getName: x => x.name
+			};
+		},
+
+		components: {
+			Widget
+		}
+	};
+</script>

test/generator/component-binding-each/Widget.html

@@ -0,0 +1 @@
+<input bind:value>

test/generator/component-binding-each/_config.js

@@ -0,0 +1,22 @@
+export default {
+	html: `
+		<input><input><input>
+		<p>foo, bar, baz</p>
+	`,
+
+	test ( assert, component, target, window ) {
+		const event = new window.MouseEvent( 'input' );
+		const inputs = target.querySelectorAll( 'input' );
+
+		inputs[0].value = 'blah';
+		inputs[0].dispatchEvent( event );
+
+		assert.deepEqual( component.get( 'a' ), [ 'blah', 'bar', 'baz' ] );
+		assert.htmlEqual( target.innerHTML, `
+			<input><input><input>
+			<p>blah, bar, baz</p>
+		` );
+		
+		component.teardown();
+	}
+};

test/generator/component-binding-each/main.html

@@ -0,0 +1,21 @@
+{{#each a as x}}
+	<Widget bind:value='x'/>
+{{/each}}
+
+<p>{{a.join(', ')}}</p>
+
+<script>
+	import Widget from './Widget.html';
+
+	export default {
+		data () {
+			return {
+				a: [ 'foo', 'bar', 'baz' ]
+			};
+		},
+
+		components: {
+			Widget
+		}
+	};
+</script>