only set ref to null when tearing down if it is still current – closes #24

compiler/generate/visitors/attributes/addComponentAttributes.js

@@ -116,7 +116,7 @@ export default function addComponentAttributes ( generator, node, local ) {
 			` );
 
 			local.teardown.push( deindent`
-				component.refs.${attribute.name} = null;
+				if ( component.refs.${attribute.name} === ${local.name} ) component.refs.${attribute.name} = null;
 			` );
 		}
 

compiler/generate/visitors/attributes/addElementAttributes.js

@@ -166,7 +166,7 @@ export default function addElementAttributes ( generator, node, local ) {
 			` );
 
 			local.teardown.push( deindent`
-				component.refs.${attribute.name} = null;
+				if ( component.refs.${attribute.name} === ${local.name} ) component.refs.${attribute.name} = null;
 			` );
 		}
 

test/compiler/refs-unset/_config.js

@@ -0,0 +1,23 @@
+export default {
+	data: {
+		x: true
+	},
+
+	html: '<canvas data-x="true"></canvas>',
+
+	test ( assert, component, target ) {
+		let canvas = target.querySelector( 'canvas' );
+		assert.equal( canvas, component.refs.foo );
+		assert.equal( canvas.getAttribute( 'data-x' ), 'true' );
+
+		component.set({ x: false });
+		canvas = target.querySelector( 'canvas' );
+		assert.equal( canvas, component.refs.foo );
+		assert.equal( canvas.getAttribute( 'data-x' ), 'false' );
+
+		component.set({ x: true });
+		canvas = target.querySelector( 'canvas' );
+		assert.equal( canvas, component.refs.foo );
+		assert.equal( canvas.getAttribute( 'data-x' ), 'true' );
+	}
+};

test/compiler/refs-unset/main.html

@@ -0,0 +1,5 @@
+{{#if x}}
+	<canvas ref:foo data-x='true'></canvas>
+{{else}}
+	<canvas ref:foo data-x='false'></canvas>
+{{/if}}