renovations

archive/widget-tasks/5-tree-checkboxes/solution.md

@@ -0,0 +1,75 @@
+# Получение данных
+
+Данные регионов можно хранить в разном виде. 
+
+Наиболее естественное представление дерева -- в виде вложенного объекта: свойство `children` содержит поддеревья.
+
+Выглядит это так:
+
+```js
+var regions = [
+  {
+    title: 'Россия',
+    id: 1,
+    children: [
+      { 
+        title: 'Центр',
+        id: 2,
+        children: [ ... поддеревья ... ]
+      },
+      ...
+    }
+  }
+  ...
+]
+```
+
+У такого вложенного объекта есть важный недостаток: сложно перейти напрямую к узлу по ID. Нужно "прыгать" по дереву.
+
+Поэтому может быть более удобен другой вариант:
+
+```js
+var regions = [
+  {
+    title: 'Россия',
+    id: 1,
+    children: [ 2 ]
+  },
+  { 
+    title: 'Центр',
+    id: 2,
+    children: [ ... ]
+  },
+  ...
+]
+```
+
+..То есть, массив содержит все узлы дерева, и каждый узел хранит в `children` список `id` детей. 
+
+Но и это не совсем удобно. Ведь хочется по ID получить данные. Значит, нужно хранить не массив, а объект вида `id => { title: .., id: .., children: [... ] }`. 
+
+<ul>
+<li>Свойство `children` может отсутствовать, если детей нет.</li>
+<li>`id` есть и в ключе объекта и в данных узла. Так удобнее.</li>
+<li>Список внешних узлов дерева содержится в корневом узле без имени, с `id = 0`.</li> 
+</ul>
+
+**Выберите наиболее симпатичную структуру и получите её из исходного документа.**
+
+# Данные
+
+Скрипт для получения данных в последнем формате, описанном выше: [fetch.js](/files/tutorial/widgets/checkbox-tree/fetch.js).
+
+Результат в файле (после `JSON.stringify`): [regions.js](/files/tutorial/widgets/checkbox-tree/regions.js).
+
+# Исправления
+
+Желательно сделать следующие исправления:
+
+<ul>
+<li>Переделать вёрстку. В частности, заменить текстовые + - на оформление при помощи CSS.</li>
+<li>Оформить всё в виде виджета с шаблоном.</li>
+<li>Использовать ленивый рендеринг! Не рисовать всё дерево сразу (зачем рисовать то, чего не видно?), а дорисовывать при открытии.</li>
+
+# Решение
+