diff --git a/src/generators/dom/visitors/Element.js b/src/generators/dom/visitors/Element.js index 6a0a19498c..b200b9710c 100644 --- a/src/generators/dom/visitors/Element.js +++ b/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(); } }; diff --git a/src/generators/dom/visitors/attributes/binding/index.js b/src/generators/dom/visitors/attributes/binding/index.js index 9e04ee3479..b45793188c 100644 --- a/src/generators/dom/visitors/attributes/binding/index.js +++ b/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} )` ); - } } diff --git a/test/generator/binding-select-initial-value/_config.js b/test/generator/binding-select-initial-value/_config.js new file mode 100644 index 0000000000..b49c1135af --- /dev/null +++ b/test/generator/binding-select-initial-value/_config.js @@ -0,0 +1,29 @@ +export default { + skip: true, // selectedOptions doesn't work in JSDOM??? + + html: ` +

selected: b

+ + + +

selected: b

+ `, + + 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(); + } +}; diff --git a/test/generator/binding-select-initial-value/main.html b/test/generator/binding-select-initial-value/main.html new file mode 100644 index 0000000000..d7d02194c8 --- /dev/null +++ b/test/generator/binding-select-initial-value/main.html @@ -0,0 +1,9 @@ +

selected: {{selected}}

+ + + +

selected: {{selected}}

\ No newline at end of file