diff --git a/src/compile/render-dom/wrappers/Element/Binding.ts b/src/compile/render-dom/wrappers/Element/Binding.ts index 8a040e7ed6..8fc0ec2c02 100644 --- a/src/compile/render-dom/wrappers/Element/Binding.ts +++ b/src/compile/render-dom/wrappers/Element/Binding.ts @@ -153,7 +153,8 @@ export default class BindingWrapper { return { name: this.node.name, object: name, - handler: handler, + handler, + snippet, usesContext: handler.usesContext, updateDom: updateDom, initialUpdate: initialUpdate, @@ -281,7 +282,8 @@ function getValueFromDom( if (name === 'group') { const bindingGroup = getBindingGroup(renderer, binding.node.expression.node); if (type === 'checkbox') { - return `@getBindingGroupValue(#component.$$bindingGroups[${bindingGroup}])`; + renderer.component.init_uses_self = true; + return `@getBindingGroupValue($$self.$$bindingGroups[${bindingGroup}])`; } return `this.__value`; diff --git a/src/compile/render-dom/wrappers/Element/index.ts b/src/compile/render-dom/wrappers/Element/index.ts index 10e08bc94d..2f9d0c5adf 100644 --- a/src/compile/render-dom/wrappers/Element/index.ts +++ b/src/compile/render-dom/wrappers/Element/index.ts @@ -540,15 +540,15 @@ export default class ElementWrapper extends Wrapper { } }); - const allInitialStateIsDefined = group.bindings - .map(binding => `'${binding.object}' in ctx`) - .join(' && '); + const someInitialStateIsUndefined = group.bindings + .map(binding => `${binding.snippet} === void 0`) + .join(' || '); if (this.node.name === 'select' || group.bindings.find(binding => binding.name === 'indeterminate' || binding.isReadOnlyMediaAttribute)) { renderer.hasComplexBindings = true; block.builders.hydrate.addLine( - `if (!(${allInitialStateIsDefined})) #component.$$root._beforecreate.push(${handler});` + `if (${someInitialStateIsUndefined}) @after_render(() => ${callee}.call(${this.var}));` ); } @@ -556,7 +556,7 @@ export default class ElementWrapper extends Wrapper { renderer.hasComplexBindings = true; block.builders.hydrate.addLine( - `#component.$$root._beforecreate.push(${handler});` + `@after_render(() => ${callee}.call(${this.var}));` ); } }); diff --git a/test/runtime/samples/binding-indirect-computed/main.html b/test/runtime/samples/binding-indirect-computed/main.html index c9b4bbf296..9a374771c7 100644 --- a/test/runtime/samples/binding-indirect-computed/main.html +++ b/test/runtime/samples/binding-indirect-computed/main.html @@ -14,7 +14,7 @@ diff --git a/test/runtime/samples/binding-input-radio-group/_config.js b/test/runtime/samples/binding-input-radio-group/_config.js index 4b3cda537d..95ae3f3446 100644 --- a/test/runtime/samples/binding-input-radio-group/_config.js +++ b/test/runtime/samples/binding-input-radio-group/_config.js @@ -5,6 +5,8 @@ const values = [ ]; export default { + solo: 1, + props: { values, selected: values[1] @@ -25,18 +27,18 @@ export default {

Beta

`, - test ( assert, component, target, window ) { - const inputs = target.querySelectorAll( 'input' ); - assert.equal( inputs[0].checked, false ); - assert.equal( inputs[1].checked, true ); - assert.equal( inputs[2].checked, false ); + async test(assert, component, target, window) { + const inputs = target.querySelectorAll('input'); + assert.equal(inputs[0].checked, false); + assert.equal(inputs[1].checked, true); + assert.equal(inputs[2].checked, false); - const event = new window.Event( 'change' ); + const event = new window.Event('change'); inputs[0].checked = true; - inputs[0].dispatchEvent( event ); + await inputs[0].dispatchEvent(event); - assert.htmlEqual( target.innerHTML, ` + assert.htmlEqual(target.innerHTML, ` @@ -50,18 +52,18 @@ export default {

Alpha

- ` ); + `); - assert.equal( inputs[0].checked, true ); - assert.equal( inputs[1].checked, false ); - assert.equal( inputs[2].checked, false ); + assert.equal(inputs[0].checked, true); + assert.equal(inputs[1].checked, false); + assert.equal(inputs[2].checked, false); component.selected = values[2]; - assert.equal( inputs[0].checked, false ); - assert.equal( inputs[1].checked, false ); - assert.equal( inputs[2].checked, true ); + assert.equal(inputs[0].checked, false); + assert.equal(inputs[1].checked, false); + assert.equal(inputs[2].checked, true); - assert.htmlEqual( target.innerHTML, ` + assert.htmlEqual(target.innerHTML, ` @@ -75,6 +77,6 @@ export default {

Gamma

- ` ); + `); } };