Merge pull request #690 from sveltejs/gh-685

fix context for bindings

src/generators/dom/visitors/Component/Binding.ts

@@ -54,7 +54,8 @@ export default function visitBinding(
 		block,
 		name,
 		snippet,
-		context: '_context',
+		_this: 'this',
+		props: '_context',
 		attribute,
 		dependencies,
 		value: 'value',

src/generators/dom/visitors/Element/Binding.ts

@@ -53,7 +53,8 @@ export default function visitBinding(
 		block,
 		name,
 		snippet,
-		context: '_svelte',
+		_this: state.parentNode,
+		props: '_svelte',
 		attribute,
 		dependencies,
 		value,

src/generators/dom/visitors/Element/EventHandler.ts

@@ -64,7 +64,7 @@ export default function visitEventHandler(
 	// create the handler body
 	const handlerBody = deindent`
 		${state.usesComponent &&
-			`var ${block.alias('component')} = this._svelte.component;`}
+			`var ${block.alias('component')} = ${_this}._svelte.component;`}
 		${declarations}
 		[✂${attribute.expression.start}-${attribute.expression.end}✂];
 	`;

src/generators/dom/visitors/shared/binding/getSetter.ts

@@ -6,7 +6,8 @@ export default function getSetter({
 	block,
 	name,
 	snippet,
-	context,
+	_this,
+	props,
 	attribute,
 	dependencies,
 	value,
@@ -20,8 +21,8 @@ export default function getSetter({
 		const computed = isComputed(attribute.value);
 
 		return deindent`
-			var list = this.${context}.${block.listNames.get(name)};
-			var index = this.${context}.${block.indexNames.get(name)};
+			var list = ${_this}.${props}.${block.listNames.get(name)};
+			var index = ${_this}.${props}.${block.indexNames.get(name)};
 			${computed && `var state = #component.get();`}
 			list[index]${tail} = ${value};
 

test/runtime/samples/binding-select-in-each-block/_config.js

@@ -0,0 +1,32 @@
+export default {
+	skip: true, // JSDOM...
+
+	html: `
+		<select>
+			<option value='hullo'>Hullo</option>
+			<option value='world'>World</option>
+		</select>
+
+		<select>
+			<option value='hullo'>Hullo</option>
+			<option value='world'>World</option>
+		</select>
+	`,
+
+	data: {
+		items: [{ value: 'hullo' }, { value: 'world' }]
+	},
+
+	test(assert, component, target, window) {
+		const selects = [...target.querySelectorAll('select')];
+
+		const change = new window.Event('change');
+
+		selects[1].options[0].selected = true;
+		selects[1].dispatchEvent(change);
+
+		assert.deepEqual(component.get('items'), [
+			{ value: 'hullo' }, { value: 'hullo' }
+		]);
+	}
+};

test/runtime/samples/binding-select-in-each-block/main.html

@@ -0,0 +1,6 @@
+{{#each items as item}}
+	<select bind:value="item.value">
+		<option value="hullo">Hullo</option>
+		<option value="world">World</option>
+	</select>
+{{/each}}