JS: Handlebars recursive menu

<script id="list" type="text/x-handlebars-template">
	{{#each items}}
	<li>
		{{name}}
		{{#if items}}
		<ul>
			{{> list}}
		</ul>
		{{/if}}
	</li>
	{{/each}}
</script>

<script id="main" type="text/x-handlebars-template">
	<ul>
		{{> list}}
	</ul>
</script>

<script>
var source = document.getElementById('main').innerHTML,
	template = Handlebars.compile(source),
	context = {
		items : [
			{ name: "menu 1" },
			{ name: "menu 2" },
			{ name: "menu 3", items: [
				{ name: "menu 3.1"},
				{ name: "menu 3.2", items: [
					{name : "menu 3.2.1", items: [
						{name: "menu 3.2.1.1"},
						{name: "menu 3.2.1.2"}
					]},
					{name : "menu 3.2.2"}
				]},
				{ name: "menu 3.3"}
			]},
			{ name: "menu 4", items: [
				{name: "menu 4.1"}
			]},
			{ name: "menu 5", items: [
				{ name: "menu 5.1"},
				{ name: "menu 5.2", items : [
					{name: "menu 5.2.1"},
					{name: "menu 5.2.2"}
				]},
				{ name: "menu 5.3"}
			]}
		]
	};

//Register the list partial
Handlebars.registerPartial("list", document.querySelector('#list').innerHTML);

//Render the content 
document.querySelector('body').innerHTML = template(context);
</script>