GitHub

Откровения переднего плана

Наконец-то я закончил модуль JS (JavaScript) и готовлюсь к заключительному этапу в школе Flatiron с React / Redux. Я был знаком с очень простым, работающим JS еще с того времени, когда я был подписчиком в Code School, но очевидно, что здесь меня ждало гораздо больше, особенно когда дело доходило до подключения его с Rails через контроллеры к GET и POST данным, и у меня есть сказать, я нашел все это очень увлекательным. Мне нравится Ruby, особенно фреймворк Rails, но, несмотря на это, а также на то, что JS может сводить с ума своей асимметричной природой, повсюду фигурными скобками и т. Д., Мне, кажется, действительно нравится быть в передней части. Я не уверен, является ли это явным предпочтением на данный момент или это просто что-то новое и блестящее, но то, как я могу управлять объектной моделью документа (DOM) с помощью запросов AJAX (асинхронный JavaScript и XML), JSON (нотация объектов JavaScript ) и вставлять код HMTL со строковыми значениями, предоставляемыми шаблонными литералами благодаря ES6 (ECMAScript 2016), божественно.

Решаемые задачи

Итак, в основном мое задание состояло в том, чтобы вернуть «список вещей», «одну конкретную вещь», и мне также требовалось создать и затем отобразить ресурс без перезагрузки страницы с помощью AJAX, для чего потребовались бы как GET, так и POST запрос. Наконец, мне пришлось использовать один метод (по крайней мере) на прототипе. Поскольку это было расширением более ранней курсовой работы по Rails, я решил переработать свою исходную модель комментариев, чтобы приспособить ее к взаимодействию с AJAX. Как всегда, видео Ави были чрезвычайно полезны, и я должен сказать, что ссылался на них довольно часто, хотя тема в первом видео также касалась модели Comments, мне, безусловно, пришлось настроить несколько вещей и, в конечном итоге, я сделал код очень моим. собственный.

Комментарий

Начнем с этого. Как я уже упоминал выше, я большую часть времени слушал онлайн-лекцию Ави о паузе и частом ее воспроизведении. Мне также пришлось адаптировать пример урока по приложению Avi «Списки» и объединить его с моим существующим кодом для работы с моей Comment моделью. Я создал файл «comments.js» и написал Comment.ready функцию, которая будет вызываться, как только DOM будет полностью загружен. Это началось с введения пробела в пустом пространстве, которое я сначала скрывал, но затем раскрыл, чтобы компенсировать ссылку «Загрузить комментарии», которая при нажатии исчезает, оставляя после себя странное пространство. Далее следует переменная, которая содержит значение HTML шаблона Handlebars.js, которое, в свою очередь, будет передано в компилятор Handlebars, где атрибуты объекта шаблона и JS будут объединены в окончательное значение, которое будет отображаться на странице «Обзор». За ним следует «прослушиватель событий», который отслеживает отправку формы и затем запускает запрос AJAX POST. Наконец, будет подготовлен метод Comment.list();, чтобы отображать все предыдущие комментарии при вызове. Вызов Comment.ready(); будет заключен в сокращенную функцию «документ готов» после загрузки страницы. Нижняя функция - это метод, переданный прототипу и возвращающий скомпилированный HTML-код Handlebars для визуализации.

Ниже представлена ​​функция Comment.formSubmit();. Как упоминалось выше, это запускается «слушателем событий» всякий раз, когда отправляется комментарий. Сама форма $(this) кэшируется в переменной и используется позже в функции как два других особых атрибута формы. Затем выполняется запрос AJAX, обратите внимание, что метод не просто говорит POST или PATCH и т. Д., Передавая объекту jQuery значение атрибута input формы, нам не нужно беспокоиться о том, что в итоге получится неправильный глагол. Между прочим, в данном случае это POST, это ловкий трюк, описанный в видеолекции Ави.

При успешном запросе вызывается функция Comment.success. Это создает новый Comment с данными JSON, отправленными ему через контроллер. Comment.prototype.renderLI, как показано на Рис.1, сохраняется в переменной, а затем передается вместе с объединенным HTML для визуализации. Ниже приведен код Ruby, демонстрирующий действие create в контроллере, где он отвечает соответствующим образом JSON согласно запросу POST.

Предварительный просмотр

Итак, переходим на страницу просмотра Writer. Здесь я хотел, чтобы пользователь мог показать «список вещей», который я уже как бы покрыл в файле комментариев, но на самом деле я просто хотел сделать что-то намеренно другое. Я решил, что после нажатия «Показать обзоры» пользователю будут показаны все эти Writer обзоры в форме предварительного просмотра. Это будет включать в себя усеченное повествование, миниатюру постера фильма и _22 _ / _ 23_, оба из которых будут ссылаться на страницу киносеанса вместе со ссылкой «Подробнее» в конце раздела повествования. Я начал с того, что вырезал неупорядоченный список, заключенный в «div», который предоставил мне ловушку, которую можно было использовать для добавления возвращаемого значения AJAX. Таким же образом я построил вышеупомянутый раздел комментариев в HTML.

Я использовал jQuery, чтобы получить movies ul, а затем очистил его от любого существующего HTML. Затем будет запущен запрос GET, возвращающий значение JSON для всех фильмов, принадлежащих рассматриваемому критику (это также, как и комментарии, выполнило отображение заданных has_many и belongs_to любых двух заданных объектов). Затем я перебрал возвращенные данные JSON и кэшировал определенные атрибуты в переменных, чтобы их можно было включить в литерал шаблона, который будет отображаться в неупорядоченном списке ... да, я знаю, что мне следовало использовать здесь Handlebars (этот литерал шаблона массивный - рис.5), но я действительно просто хотел, чтобы этот проект был представлен. Думаю, я вернусь к этому позже, или, возможно, мой инструктор захочет провести рефакторинг во время проверки кода, мы увидим. Полный код ниже.

Наконец, я решил переработать страницу Genre шоу. Я использовал полную графику для этого, показывая афиши фильмов в сетке для каждого раздела, с не более чем заголовком и годом при наведении курсора мыши. Этот был, вероятно, самым интересным, поскольку с моей стороны требовалось немало слепых экспериментов. Я выделил пару кнопок начальной загрузки на странице HTML, Prev и Next (вы, вероятно, можете видеть, к чему это идет). В моем JS-файле я прикрепил к каждому прослушивателю события «клик», который затем перехватил этот элемент. Затем JS берет data-id из этого объекта jQuery и добавляет / вычитает один из него или из него. Это будет сохранено в переменной, которая затем будет объединена в URL-адрес, используемый для запроса AJAX get. data-id нужно было установить с помощью ERB (Embedded Ruby) на странице шоу; показано ниже.

Поэтому, конечно, при нажатии кнопки «Далее» или «Назад» запрос AJAX срабатывает и извлекает данные для этого объединенного URL-адреса, в то время как значение URL-адреса на странице показа для обеих кнопок равно #. Возвращаемые данные из запроса GET затем зацикливаются, выбор соответствующих атрибутов сохраняется в переменных, которые затем передаются в литерал шаблона, который затем добавляется к ul на странице шоу. Экспериментальная часть этого процесса заключалась в том, что вне этого цикла мне приходилось сбрасывать значение data-id для любой кнопки, которая была нажата, а затем настраивать кнопку, которая не была нажата. Страница не перезагружается, следовательно, URL не меняется; это проблема для созданного URL, переданного в запрос AJAX GET. Ниже приведен фрагмент кода с jQuery / AJAX для кнопки «Далее», для кнопки «Назад» все было наоборот.

Опять же, Handlebars был бы мучительно уместен, и я пообещал себе, что найду время для его рефакторинга (примерно так же, как я продолжаю обещать себе, что однажды я проведу рефакторинг всей этой беспорядочной внутренней стилизации). Ну что ж, пока все, жарко и React / Redux ждут ...