can/demos/can-component/nested-component-content-leak.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<div id='out'></div>
<script src="../../node_modules/steal/steal.js"></script>
<script>
steal('can/view/stache', 'can/list/sort', 'can/view/bindings', function(){

	var items = [];

	for (var i = 0; i < 1000; i++) {
		items.push({
			// Random 5 character String
			name: Math.random().toString(36)
				.replace(/[^a-z]+/g, '').substr(0, 5)
		});
	}

	var viewModel = new can.Map({
		show: false
	})

	can.Component.extend({
		tag: 'grandparent-component',
		template: can.stache('{{#if show}}<parent-component><ul>{{#items}}<li>{{name}}</li>{{/items}}</ul></parent-component>{{/if}}'),
		scope: viewModel
	});

	can.Component.extend({
		tag: 'parent-component',
		template: can.stache('<content/>'),
		scope: {
			items: items
		}
	});

	$('#out').html(can.stache('<grandparent-component></grandparent-component>'));

	setInterval(function () {
		viewModel.attr('show', ! viewModel.attr('show'));
		console.log(Object.keys(can.view.nodeLists.nodeMap).length)
	}, 5000); 

});
</script>