Эта запись в блоге входит в серию, в которой мы собираемся создать структуру на JavaScript, которая поможет нам создать собственный механизм резюме. Найдите первую статью из серии здесь.
В предыдущем посте мы увидели, как визуализировать данные из нашей модели, когда это простое значение. Очень удобно работать с нашим именем, городом и т. д. для очень простых атрибутов. Как насчет опыта и проектов? У нас есть несколько разных, но все они имеют одинаковый формат. Мы собираемся понять, как отображать наборы объектов.
Чтобы отобразить коллекцию элементов, мне нужно иметь пример того, как отображать один элемент, а затем я делаю то же самое для других. Мне нужен план, который я буду использовать для печати каждого элемента коллекции после размещения данных в нужном месте в этом примере. Чтобы получить этот элемент схемы из HTML в мой код JavaScript, мне придется установить соглашение об именах. Это соглашение об именах следующее: если коллекция названа «проекты», схема элемента в этой коллекции будет называться «проекты_элемент». Например, я хочу отобразить массив проектов, я дам чертежу идентификатор «projects_item», а затем буду работать с ним в своем коде JavaScript. Посмотрим, как это выглядит в коде:
Строки с 1 по 5 — это просто необработанные данные, из которых состоит мое резюме, мы можем найти такие коллекции, как проекты, опыт, образование и языки. Все начинается, когда я создаю переменную fields и заполняю ее всеми элементами DOM, имеющими идентификаторы в моем HTML-документе. Я перебираю все эти поля и для каждого смотрю идентификатор и сохраняю его в field_name. Имеет ли идентификатор «_item» внутри него? Если нет, то получить значение в объекте модели, имя которого равно идентификатору. Если у него есть «_item» — и это гораздо интереснее — это значит, что мы столкнулись с чертежом предмета коллекции. Теперь мы хотим получить часть идентификатора до «_», чтобы иметь возможность искать ее в нашем model. Например, если у нас есть идентификатор, равный «project_item», мы получаем «project», который представляет собой массив объектов в модели. Затем мы перебираем массив в модели и заполняем его для каждого элемента. Чтобы было понятнее, я создал отдельную функцию (в данном случае она не очень полезна, просто для ясности). Мы передаем этой функции элемент схемы HTML как new_html_elem и соответствующий массив в модели. Затем эта функция будет искать элементы по имени класса и помещать нужные данные в нужное место. Как только мы заполняем элемент, мы добавляем его к родительскому элементу того, у которого есть «_item» в его идентификаторе. Затем мы клонируем узел, чтобы создать новый и т. д. :D.
Это все на сегодня. В следующей части мы поговорим о том, как интернационализировать наш личный сайт с помощью кнопки смены языка резюме.
