Merge pull request #304 from sveltejs/gh-301

Initialise <select> elements with two-way binding

src/generators/dom/visitors/Element.js

@@ -111,6 +111,10 @@ export default {
 			return Component.leave( generator, node );
 		}
 
+		if ( node.initialUpdate ) {
+			generator.current.builders.init.addBlock( node.initialUpdate );
+		}
+
 		generator.pop();
 	}
 };

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

@@ -116,7 +116,27 @@ export default function createBinding ( generator, node, attribute, current, loc
 			}
 		` );
 	} else {
-		const updateElement = `${local.name}.${attribute.name} = ${contextual ? attribute.value : `root.${attribute.value}`}`;
+		let updateElement;
+
+		if ( node.name === 'select' ) {
+			// TODO select multiple
+			const value = generator.current.getUniqueName( 'value' );
+			const i = generator.current.getUniqueName( 'i' );
+			const option = generator.current.getUniqueName( 'option' );
+
+			updateElement = deindent`
+				var ${value} = ${contextual ? attribute.value : `root.${attribute.value}`};
+				for ( var ${i} = 0; ${i} < ${local.name}.options.length; ${i} += 1 ) {
+					var ${option} = ${local.name}.options[${i}];
+					if ( ${option}.__value === ${value} ) {
+						${option}.selected = true;
+						break;
+					}
+				}
+			`;
+		} else {
+			updateElement = `${local.name}.${attribute.name} = ${contextual ? attribute.value : `root.${attribute.value}`};`;
+		}
 
 		generator.uses.addEventListener = true;
 		generator.uses.removeEventListener = true;
@@ -130,20 +150,16 @@ export default function createBinding ( generator, node, attribute, current, loc
 			}
 
 			addEventListener( ${local.name}, '${eventName}', ${handler} );
-			${updateElement};
 		` );
 
+		node.initialUpdate = updateElement;
+
 		local.update.addLine(
-			`if ( !${local.name}_updating ) ${updateElement};`
+			`if ( !${local.name}_updating ) ${updateElement}`
 		);
 
 		generator.current.builders.teardown.addLine( deindent`
 			removeEventListener( ${local.name}, '${eventName}', ${handler} );
 		` );
 	}
-
-	if ( node.name === 'select' ) {
-		generator.hasComplexBindings = true;
-		local.init.addLine( `component._bindings.push( ${handler} )` );
-	}
 }

test/generator/binding-select-initial-value/_config.js

@@ -0,0 +1,29 @@
+export default {
+	skip: true, // selectedOptions doesn't work in JSDOM???
+
+	html: `
+		<p>selected: b</p>
+
+		<select>
+			<option>a</option>
+			<option>b</option>
+			<option>c</option>
+		</select>
+
+		<p>selected: b</p>
+	`,
+
+	data: {
+		selected: 'b'
+	},
+
+	test ( assert, component, target ) {
+		const select = target.querySelector( 'select' );
+		const options = [ ...target.querySelectorAll( 'option' ) ];
+
+		assert.equal( select.value, 'b' );
+		assert.ok( options[1].selected );
+
+		component.teardown();
+	}
+};

test/generator/binding-select-initial-value/main.html

@@ -0,0 +1,9 @@
+<p>selected: {{selected}}</p>
+
+<select bind:value='selected'>
+	<option value="a">a</option>
+	<option value="b">b</option>
+	<option value="c">c</option>
+</select>
+
+<p>selected: {{selected}}</p>