en.javascript.info/2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/index.html
2015-02-21 00:59:02 +03:00

42 lines
No EOL
1 KiB
HTML
Executable file

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="menu.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
<script src="https://cdn.polyfill.io/v1/polyfill.js?features=Element.prototype.closest"></script>
<script src="menu.js"></script>
</head>
<body>
<script type="text/template" id="menu-template">
<div class="menu">
<span class="title"><%-title%></span>
</div>
</script>
<script type="text/template" id="menu-list-template">
<ul>
<% items.forEach(function(item) { %>
<li><%-item%></li>
<% }); %>
</ul>
</script>
<script>
var menu = new Menu({
title: "Сладости",
template: _.template( document.getElementById('menu-template').innerHTML.trim()),
listTemplate: _.template( document.getElementById('menu-list-template').innerHTML.trim()),
items: [
"Торт", // cake <a href="#cake">Торт</a>
"Пончик", // donut
"Шоколадка" // chokolate
]
});
document.body.appendChild(menu.getElem());
</script>
</body>
</html>