dont trigger bindings for torn-down components (#277)

src/generators/dom/index.js

@@ -230,6 +230,8 @@ export default function dom ( parsed, source, options, names ) {
 	let i = generator.renderers.length;
 	while ( i-- ) builders.main.addBlock( generator.renderers[i] );
 
+	builders.init.addLine( `this._torndown = false;` );
+
 	if ( parsed.css && options.css !== false ) {
 		builders.init.addLine( `if ( !addedCss ) addCss();` );
 	}
@@ -334,6 +336,7 @@ export default function dom ( parsed, source, options, names ) {
 			this._fragment = null;
 
 			this._state = {};
+			this._torndown = true;
 		};
 	` );
 

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

@@ -88,6 +88,7 @@ export default function createBinding ( generator, node, attribute, current, loc
 			var ${local.name}_updating = false;
 
 			component._bindings.push( function () {
+				if ( ${local.name}._torndown ) return;
 				${local.name}.observe( '${attribute.name}', function ( value ) {
 					${local.name}_updating = true;
 					${setter}

test/generator/component-binding-conditional-b/Bar.html

@@ -0,0 +1,9 @@
+<p>y: {{y}}</p>
+
+<script>
+	export default {
+		data: () => ({
+			y: 'bar'
+		})
+	};
+</script>

test/generator/component-binding-conditional-b/Baz.html

@@ -0,0 +1,7 @@
+<script>
+	export default {
+		data: () => ({
+			x: true
+		})
+	};
+</script>

test/generator/component-binding-conditional-b/Foo.html

@@ -0,0 +1,9 @@
+<p>y: {{y}}</p>
+
+<script>
+	export default {
+		data: () => ({
+			y: 'foo'
+		})
+	};
+</script>

test/generator/component-binding-conditional-b/_config.js

@@ -0,0 +1,24 @@
+export default {
+	'skip-ssr': true, // TODO delete this line, once binding works
+
+	// This test fails, because the Bar y binding is activated before the
+	// Baz x binding, meaning that by the time Foo is created, we already
+	// have a value for y which Foo won't override. Easily worked around,
+	// probably impossible to 'fix', so this test is left here for info
+	// purposes but will probably remain skipped indefinitely.
+	skip: true,
+
+	html: `
+		<p>y: foo</p>
+		<p>y: foo</p>
+	`,
+
+	test ( assert, component, target ) {
+		component.set({ x: false });
+
+		assert.htmlEqual( target.innerHTML, `
+			<p>y: foo</p>
+			<p>y: foo</p>
+		` );
+	}
+};

test/generator/component-binding-conditional-b/main.html

@@ -0,0 +1,23 @@
+<p>y: {{y}}</p>
+
+<Baz bind:x/>
+
+{{#if x}}
+	<Foo bind:y/>
+{{else}}
+	<Bar bind:y/>
+{{/if}}
+
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+	import Baz from './Baz.html';
+
+	export default {
+		components: {
+			Foo,
+			Bar,
+			Baz
+		}
+	};
+</script>

test/generator/component-binding-conditional/Bar.html

@@ -0,0 +1,9 @@
+<p>y: {{y}}</p>
+
+<script>
+	export default {
+		data: () => ({
+			y: 'bar'
+		})
+	};
+</script>

test/generator/component-binding-conditional/Baz.html

@@ -0,0 +1,7 @@
+<script>
+	export default {
+		data: () => ({
+			x: true
+		})
+	};
+</script>

test/generator/component-binding-conditional/Foo.html

@@ -0,0 +1,9 @@
+<p>y: {{y}}</p>
+
+<script>
+	export default {
+		data: () => ({
+			y: 'foo'
+		})
+	};
+</script>

test/generator/component-binding-conditional/_config.js

@@ -0,0 +1,17 @@
+export default {
+	'skip-ssr': true, // TODO delete this line, once binding works
+
+	html: `
+		<p>y: foo</p>
+		<p>y: foo</p>
+	`,
+
+	test ( assert, component, target ) {
+		component.set({ x: false });
+
+		assert.htmlEqual( target.innerHTML, `
+			<p>y: foo</p>
+			<p>y: foo</p>
+		` );
+	}
+};

test/generator/component-binding-conditional/main.html

@@ -0,0 +1,23 @@
+<p>y: {{y}}</p>
+
+{{#if x}}
+	<Foo bind:y/>
+{{else}}
+	<Bar bind:y/>
+{{/if}}
+
+<Baz bind:x/>
+
+<script>
+	import Foo from './Foo.html';
+	import Bar from './Bar.html';
+	import Baz from './Baz.html';
+
+	export default {
+		components: {
+			Foo,
+			Bar,
+			Baz
+		}
+	};
+</script>