Приложение Rails с интерфейсом jQuery

Приступая к программе веб-разработки с полным стеком, я подумал, что буду более одаренным во фронтенд-разработке. В конце концов, я специализировалась на розничной торговле модной одеждой, работала дизайнером интерьеров и много работала над графическим дизайном. Творческая сторона, связанная с UI и UX, несомненно, должна была стать моей сильной стороной. После завершения этого проекта я понял, что проектирование схемы базы данных и создание маршрутов гораздо проще, чем реализация jQuery в приложении для рельсов. Во многом это связано с тем, что некоторые функции Rails не очень хорошо работают с некоторыми библиотеками JavaScript. Вот основные вещи, с которыми я боролся (поэтому они запечатлелись в моем мозгу).

Turbolinks не работает сразу из коробки

Я настроил ссылку «Все категории» в своем приложении, чтобы переопределить «индекс» категорий рендеринга по умолчанию и вместо этого вставить JSON, запрошенный ajax, в DOM. Я был очень счастлив, когда это работало, так как мой шаблон Handlebars был очень длинным с несколькими вспомогательными блоками if. Затем я заметил, что после второго нажатия «Все категории» после рендеринга другой страницы HTML-рендеринг переопределенных рельсов снова будет активен. После прочтения подобных вопросов на StackOverflow ответ был прост. Добавьте «турболинки: загрузка»

$( document ).on(‘turbolinks:load’, function(). 

Or

document.addEventListener(“turbolinks:load”, function() {
 // …
})

Поскольку я создал свое приложение для обучения, я решил отказаться от использования турболинков. Как только я добавлю больше моделей и функций, мне обязательно нужно будет включить турбоссылки, чтобы ускорить приложение.

Ручки в Rails

Использовать шаблоны Handlebars в ванильном файле JavaScript очень просто. Использовать его в приложении Rails не так просто… поначалу. Конечно, есть полезная документация, описывающая, как реализовать Handlebars в Rails, но я пошел дальше (используя ее с объектными моделями JavaScript). Я создал модель Chore и после запроса AJAX «GET» или «POST» с возвратом JSON я создал объект chore с этим JSON. Ничего страшного, я это уже делал. Проблема возникла, когда я пытался задать контекст шаблона Handlebars, а затем вызвать шаблон с помощью рутинного объекта. Тогда это пришло ко мне как пощечина. Мне не нужно было устанавливать контекст, потому что я уже создал его с помощью самой модели Chore. Это все, что мне нужно было написать:

Chore.prototype.renderTd = function() {
  return HandlebarsTemplates['chores/index'](this);
}

Кроме того, часть путаницы с Handlebars заключалась в наличии шаблонов и помощников в моих представлениях. Все, что касается Handlebars, принадлежит app/assets/javascripts/templates. Для своих домашних дел я создал папку хозяйственных работ и файл index.hbs, следуя шаблону MVC.

См. также:  Можно использовать стрелочную функцию в качестве инициализатора свойств класса, если у вас не слишком много экземпляров…

Не забудьте BCRYPT в файле сидов базы данных

После создания моего файла seed с незашифрованным password_digest я получал ошибки о невозможности записи в базу данных только для чтения при создании пользователя, и @user.authenticate(password) больше не работал. Всегда имитируйте точный способ работы приложения.

Это были основные проблемы, которые у меня были. Может показаться, что это не так уж и много, но сам по себе руль имел множество проблем. Я очень доволен тем, как получилось приложение. Конечно, всегда есть что-то еще, что я хочу реализовать. И, надеюсь, развертывание на Heroku не будет слишком сложным.

Понравилась статья? Поделиться с друзьями:
IT Шеф
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: