Эта запись в блоге входит в серию, в которой мы собираемся создать структуру на JavaScript, которая поможет нам создать собственный механизм резюме. Найдите первую статью цикла здесь.

Давайте продолжим создавать наше потрясающее резюме, которым мы сможем очень легко управлять. Вы сможете изменить опыт в своем резюме, добавить новый и т. д., не касаясь html и css, как только он будет настроен! У нас будет возможность очень легко изменить дизайн, чтобы придать нашему сайту новый свежий вид. Так же просто, как изменить свое резюме на linkedIn, но на своем собственном веб-сайте www.lastnamefirstname.com :D.

Очень важно понять, как мы будем действовать. Мы можем подытожить это одной строкой (которая не от меня, но я люблю):

«Заставьте это работать, затем сделайте это правильно, затем сделайте это быстро».

Идея приложения следующая: мы создадим модель, в которой будут жить все необработанные данные, создадим «id» для каждого тега HTML, который отображает данные. Затем нам нужно будет привязать элемент представления к нужным данным в модели благодаря ранее добавленному «id». Мы построим модель и отобразим ее пользователю в нужном месте благодаря привязкам данных.

Давай сделаем это. Как и в предыдущем посте, первый шаг — выбрать правильный дизайн с помощью HTML и CSS, чтобы мы не утруждали себя его написанием. ВЫПОЛНЕНО :)

Теперь давайте попробуем заставить нашу структуру работать от начала до конца для одного простого атрибута. Мы присваиваем параметру имени идентификатор, я создаю атрибут «имя» в своей модели и пытаюсь отобразить значение модели в представлении.

Я добавляю идентификатор «имя»

И я хочу, чтобы результат был:

Чтобы сделать это, мы должны получить правильное значение из модели и заменить то, что находится внутри элемента DOM, на id «name». Хорошо, давайте сделаем это. Мы берем элемент DOM с идентификатором « name » и присваиваем ему правильное значение.

Хорошо, это работает на данный момент. Это будет работать, пока у меня есть плоская структура данных.

Я хотел бы, чтобы в конце проекта мое резюме имело очень удобную структуру, подобную этой:

Эта структура данных под названием «резюме» предназначена для профессионального опыта и личных проектов, которые представляют собой коллекции. В этом примере у меня есть два проекта в виде объектов с одинаковыми атрибутами, хранящимися в массиве.

Давайте продолжим с этой более интуитивной структурой данных. Мы знаем, как изменить простые элементы пользовательского интерфейса, захватив их благодаря их идентификатору и установив их свойство «innerHTML».

В следующем сообщении блога мы сосредоточимся на получении коллекций из модели и отображении их в представлении.

Следите здесь.