CanJS Child Component viewModel problem

HTML

<script src="http://canjs.com/release/2.2.9/can.jquery.js"></script>
<h1>CanJS child components</h1>
<div id="content"></div>

CSS

body {
    font-family: sans-serif;
}

h2 {
    margin: 10px 0;
    font-size: 24px;
    font-weight: bold;
}

h3 {
    margin: 5px 0;
    font-size: 18px;
    font-weight: bold;
}

JavaScript

can.Component.extend({
	tag: 'list',
	template: '<h2>List</h2>' +
    		'{{#items}}' +
    		'<list-item {{data "context"}}></list-item>' + // <== How can I assign current item data to list-item's viewModel?
    		'{{/items}}',
	viewModel: {
		items: [
			{ title: 'Item 1', value: 100 },
			{ title: 'Item 2', value: 200 },
      { title: 'Item 3', value: 300 },
      { title: 'Item 1', value: 100 },
			{ title: 'Item 2', value: 200 },
      { title: 'Item 3', value: 300 }
		]
	}
});

can.Component.extend({
	tag: 'list-item',
    template: '<h3>List item</h3>' +
    		'<p>title: {{title}}, value: {{value}}' + // <== I want to access the properties directly.
    		'<p>data.title: {{data.title}}, data.value: {{data.value}}</p>',
    viewModel: function(attrs, parentviewModel, element){
        return new can.Map($(element).data('context'));
    },
    leakScope: false // Disabled scope leaking to emphasize the problem.
});

$('#content').html(can.mustache('<list></list>'));