sketch of a solution to #708

src/generators/dom/index.ts

@@ -126,7 +126,6 @@ export default function dom(
 		${block.hasUpdateMethod && `this._fragment.update( newState, this._state );`}
 		@dispatchObservers( this, this._observers.post, newState, oldState );
 		${generator.hasComponents && `@callAll(this._oncreate);`}
-		${generator.hasComplexBindings && `@callAll(this._bindings);`}
 		${generator.hasIntroTransitions && `@callAll(this._postcreate);`}
 	`;
 
@@ -208,8 +207,7 @@ export default function dom(
 				options.css !== false &&
 				`if ( !document.getElementById( '${generator.stylesheet.id}-style' ) ) @add_css();`}
 			${generator.hasComponents && `this._oncreate = [];`}
-			${generator.hasComplexBindings && `this._bindings = [];`}
-			${generator.hasIntroTransitions && `this._postcreate = [];`}
+			${(generator.hasComplexBindings || generator.hasIntroTransitions) && `this._postcreate = [];`}
 
 			this._fragment = @create_main_fragment( this._state, this );
 
@@ -228,7 +226,6 @@ export default function dom(
 			}
 			
 			${generator.hasComponents && `@callAll(this._oncreate);`}
-			${generator.hasComplexBindings && `@callAll(this._bindings);`}
 
 			${templateProperties.oncreate && deindent`
 				if ( options._root ) {

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

@@ -67,15 +67,18 @@ export default function visitBinding(
 	block.addVariable(updating, 'false');
 
 	local.create.addBlock(deindent`
-		#component._bindings.push( function () {
-			if ( ${local.name}._torndown ) return;
-			${local.name}.observe( '${attribute.name}', function ( value ) {
-				if ( ${updating} ) return;
-				${updating} = true;
+		${local.name}.observe( '${attribute.name}', function ( value ) {
+			if ( ${updating} ) return;
+			${updating} = true;
+			${setter}
+			${updating} = false;
+		}, { init: false });
+
+		if ( @differs( ${local.name}.get( '${attribute.name}' ), ${snippet} ) ) {
+			#component._postcreate.push( function () {
 				${setter}
-				${updating} = false;
-			}, { init: @differs( ${local.name}.get( '${attribute.name}' ), ${snippet} ) });
-		});
+			});
+		}
 	`);
 
 	local.update.addBlock(deindent`

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

@@ -94,7 +94,7 @@ export default function visitBinding(
 
 		generator.hasComplexBindings = true;
 		block.builders.hydrate.addBlock(
-			`if ( !('${name}' in state) ) #component._bindings.push( ${handler} );`
+			`if ( !('${name}' in state) ) #component._postcreate.push( ${handler} );`
 		);
 	} else if (attribute.name === 'group') {
 		// <input type='checkbox|radio' bind:group='selected'> special case
@@ -120,7 +120,7 @@ export default function visitBinding(
 		updateElement = `${state.parentNode}.checked = ${condition};`;
 	} else if (node.name === 'audio' || node.name === 'video') {
 		generator.hasComplexBindings = true;
-		block.builders.hydrate.addBlock(`#component._bindings.push( ${handler} );`);
+		block.builders.hydrate.addBlock(`#component._postcreate.push( ${handler} );`);
 
 		if (attribute.name === 'currentTime') {
 			const frame = block.getUniqueName(`${state.parentNode}_animationframe`);

test/runtime/samples/component-binding-blowback-b/Nested.html

@@ -0,0 +1,17 @@
+<li>
+	{{yield}}
+</li>
+
+<script>
+	const initialValues = {
+		'id-0': 'zero',
+		'id-1': 'one',
+		'id-2': 'two'
+	};
+
+	export default {
+		oncreate() {
+			this.set({ value: initialValues[this.get('id')] });
+		}
+	};
+</script>

test/runtime/samples/component-binding-blowback-b/_config.js

@@ -0,0 +1,16 @@
+export default {
+	// solo: true,
+	'skip-ssr': true,
+
+	html: `
+		<ol>
+			<li>id-0: value is zero</li>
+			<li>id-1: value is one</li>
+			<li>id-2: value is two</li>
+		</ol>
+	`,
+
+	// test ( assert, component, target, window ) {
+		
+	// }
+};

test/runtime/samples/component-binding-blowback-b/main.html

@@ -0,0 +1,24 @@
+<ol>
+	{{#each ids as id}}
+		<Nested :id bind:value="idToValue[id]">
+			{{id}}: value is {{idToValue[id]}}
+		</Nested>
+	{{/each}}
+</ol>
+
+<script>
+	import Nested from './Nested.html';
+	
+	export default {
+		data() {
+			return {
+				ids: ['id-0', 'id-1', 'id-2'],
+				idToValue: Object.create(null)
+			};
+		},
+
+		components: {
+			Nested
+		}
+	};
+</script>