renovations

2015-02-21 14:58:02 +03:00 · 2015-02-21 14:58:02 +03:00 · 35081a779a
commit 35081a779a
parent a62682e188
115 changed files with 439 additions and 325 deletions
--- a/archive/widget-tasks/5-tree-checkboxes/solution.view/index.html
+++ b/archive/widget-tasks/5-tree-checkboxes/solution.view/index.html
@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link href="tree.css" rel="stylesheet">
+
+	<script src="http://code.jquery.com/jquery.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
+	<script src="regions.js"></script>
+	<script src="tree.js"></script>
+</head>
+
+<body>
+
+<script id="tree-template" type="text/template">
+<ul>
+	<% $(children).each(function() { 
+		var nodeData = data[this];
+		var hasChildren = nodeData.children && nodeData.children.length;
+	%>
+	<li data-id="<%=nodeData.id%>" class="<%=hasChildren ? 'tree-closed' : ''%>">
+	    <% if (hasChildren) { %> <span class="tree-toggler"></span> <% } %>
+		<input type="checkbox" value="<%=nodeData.id%>">
+		<%=nodeData.title%>
+	</li>
+	<% }); %>
+</ul>
+</script>
+
+<script>
+// требование - как можно меньше DOM-элементов
+// работа с данными из 1000 узлов
+/* пример структуры данных
+var data = [
+    {
+    	children: [1,2,3]
+    },
+	{
+		title: 'Россия',
+		id: 1,
+		children: [4,5]
+	},
+	{
+		title: 'Украина',
+		id: 2
+	},
+	{
+		title: 'Беларусь',
+		id: 3
+	},
+	{
+		title: 'Север',
+		id: 4
+	},
+	{
+		title: 'Юг',
+		id: 5
+	}
+
+];
+ */
+
+var tree = new Tree({
+	template: _.template($('#tree-template').html().trim()),
+	data: regions
+});
+
+tree.getElement().appendTo('body');
+
+
+</script>
+</body>
+</html>
+
+