diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts
index 37482f1986..4979340b4f 100644
--- a/src/generators/dom/visitors/Element/Binding.ts
+++ b/src/generators/dom/visitors/Element/Binding.ts
@@ -7,6 +7,7 @@ import Block from '../../Block';
import { Node } from '../../../../interfaces';
import { State } from '../../interfaces';
import getObject from '../../../../utils/getObject';
+import getTailSnippet from '../../../../utils/getTailSnippet';
export default function visitBinding(
generator: DomGenerator,
@@ -83,8 +84,11 @@ export default function visitBinding(
break;
}`;
+ const { name } = getObject(attribute.value);
+ const tailSnippet = getTailSnippet(attribute.value);
+
updateElement = deindent`
- var ${value} = ${snippet};
+ var ${value} = #component.get( '${name}' )${tailSnippet};
for ( var #i = 0; #i < ${state.parentNode}.options.length; #i += 1 ) {
var ${option} = ${state.parentNode}.options[#i];
diff --git a/test/runtime/samples/binding-select-in-yield/_config.js b/test/runtime/samples/binding-select-in-yield/_config.js
index e8ef296a33..4ff851d33f 100644
--- a/test/runtime/samples/binding-select-in-yield/_config.js
+++ b/test/runtime/samples/binding-select-in-yield/_config.js
@@ -23,6 +23,13 @@ export default {
select.options[2].selected = true;
select.dispatchEvent(change);
+ assert.equal(component.get('letter'), 'c');
+
+ assert.deepEqual(Array.from(select.options).map(o => o.selected), [
+ false,
+ false,
+ true
+ ]);
assert.htmlEqual(target.innerHTML, `
c
@@ -37,7 +44,11 @@ export default {
component.refs.modal.toggle();
component.refs.modal.toggle();
- assert.ok(select.options[2].selected);
+ assert.deepEqual(Array.from(select.options).map(o => o.selected), [
+ false,
+ false,
+ true
+ ]);
assert.htmlEqual(target.innerHTML, `
c