Как да използвате дистанционно: вярно, за да правите Ajax разговори в релси

Документацията на Rails за дистанционно: true е чудесно за обяснение как да добавите помощника към вашите мнения. Това обаче не обяснява напълно как отдалечено: true работи в тандем с контролер и Javascript файл за генериране и управление на JSON отговори на повикването на ajax. AJAX включва заявка на клиента (браузър) към вашия сървър, която генерира отговор към клиента, който трябва да се обработва.

По-долу е кратък урок за това как да изработите пълната верига на заявки и отговори чрез дистанционно: истински аякс обаждания в Rails.

Изглед: Извършване на заявката за ajax с дистанционно: true

<% = link_to „Добавяне на книга“, books_path, class: „добавяне“, дистанционно: true%>

Можете да добавите дистанционния помощник на Rails: вярно към всеки друг помощник на Rails, който генерира заявка в мрежата. Документите на Rails предоставят няколко полезни примера за добавяне на помощника към form_for, form_tag, link_to и button_to.

След като бъде добавен, отдалеченият: истински помощник ще спре действието по подразбиране на обекта (известен също като prevenDefault () в Javascript) и вместо това ще извърши асинхронна заявка към съответното действие на контролера. Ще трябва да се уверите, че предоставяте път за съответния тип заявка. В горния пример използвах действие със заявка POST за действие # създаване на книги в BooksController, като използвам неговия помощник books_path.

С вашия път и дистанционно: true set, бутон вече няма да щракне и опресни страницата, той просто ще направи аякс обаждане тихо. Формулярът вече няма да се изпраща, той просто ще изпраща данни от формуляра без опресняване чрез повикване на ajax. И пр. Накратко: Всичко, което е необходимо за създаване на заявката за ajax, е добавяне на дистанционно: true към обект, който може да генерира тази заявка и да гарантира, че нейният път преминава към правилното действие на контролера.

Контролерът: Получаване на заявката и генериране на отговор

Добре, така че сте направили заявката си и сега трябва да настроите контролера си, за да го получите. За да проверите дали отдалечената: true заявка работи, поставете грешка (pry, byebug и т.н.) в горната част на действието на контролера и инициирайте повикването ajax чрез формата или обекта на връзка, като щракнете върху него в браузъра си. Трябва да видите отскачащия си поредица за отстраняване на грешки и да потвърдите, че действието на контролера всъщност е било хит. Ако отладчикът не създаде момент, проверете файла route.rb, за да се уверите, че сте декларирали правилно маршрут за това действие. Обичайните сдвоявания са формуляр, който отправя POST заявка към създаването на действие на контролер или бутон за изтриване, който прави DELETE заявка за унищожаване на действие на контролер.

Сега, когато вашето отдалечено: вярна заявка се потвърждава като работи чрез инстанция на вашия грешка в действието на контролера, можете да продължите с манипулиране на параметрите, получени от действието. Проверете, за да видите какво е включено във вашите параметри, като въведете парами в конзолата, отворена от вашия грешка. Това ще ви покаже точния JSON, който вашият контролер получава в заявката.

Различните заявяващи обекти ще генерират различни видове парами. Формата ще има познат хеш на параметрите на всички стойности на формата плюс някои обхващащи информация. Връзката може просто да има заявена контролера и действието без много други. Във всеки от тези случаи може да се окаже, че трябва да предадете допълнителна информация в парамите заедно със заявката си. Можете да направите това, като ги добавите към помощника на пътя (връзка, бутон) или със скрито поле (форми), като така:

<% = link_to „Добавяне на книга“, books_path (book_id: book.id), клас: „добавяне“, дистанционно: true%>

Парамите вече ще включват предоставените ви ключове и стойности като:

{"controller" => "книги", "действие" => "създаване", "book_id" => "42"}

Сега ще предположа, че знаете как да създавате, изграждате, унищожавате или по друг начин пакетирате вашия обект с тези параметри и че вече го съхранявате в променлива на инстанция като @book.

Следващата стъпка е да върнете JSON отговор обратно на DOM елемента, който е направил заявката на ajax. Вашият контролер Rails може да се справи с това точно както може да обработва визуализация на части, пренасочване към нови маршрути или произволен брой последващи дейности за маршрутизиране. Най-лесният начин да направите това е просто да представите обекта като JSON:

render json: @book

Това ще предостави на получаващия обект атрибути за обекта на книгата. Въпреки това, тъй като се връщате обратно към Javascript файл, който няма достъп до вашата DB или директно помощници на Rails, може да искате да предоставите низ от HTML, който съдържа всичко, което JS файлът ще трябва да вмъкне нов елемент на книга в DOM , Нека да кажем, че бихте искали да вмъкнете част, която съдържа информация за книгата, както и за потребителя, който е добавил книгата. Ето разширен отговор на JSON, който можете да конструирате:

render json: {book: render_to_string ('книги / _book', оформление: false, местни жители: {book: @book, @user})}

Горното инструктира действието на контролера да върне JSON обект, който съдържа информация за преглед. По-конкретно, тя съдържа рационализирана част от HTML, взета от част от вашите изгледи, която предоставя информация за две променливи на инстанция, които предоставяте като локални променливи на частичните. Харесва ми този подход, защото ви позволява да конструирате DOM елементи от шаблони във вашите изгледи на файлове на Rails ERB, а не да ги поддържате като плаващи битове HTML във вашите JS файлове.

Javascript: Работа с отговора и манипулиране на DOM

Почти сте почти! Вече имате връзка, генерираща отдалечена или асинхронна заявка в мрежата, за да създадете действие на контролера си. Това действие на контролера генерира JSON отговор, който съдържа информация за обект, който вашият контролер е подготвил. Остава само да вземете този JSON отговор и да го използвате, за да манипулирате DOM - с други думи, да покажете на потребителя си какво точно е направил кликването им.

Във вашия Javascript файл ще трябва да изберете елемента, който е направил оригиналната заявка и да настроите събитие, за да слушате успеха на вашата ajax заявка за този елемент. Това е супер лесно с jQuery и с класа, който добавихме към нашия link_to помощник по-рано в урока:

$ ('. Добави a'). On ('ajax: успех', addBook)

Това казва на браузъра да слуша събитие за успех на ajax (успешно завършено AJAX повикване, връщащо състояние 200) на връзката в клас „добавяне“. След като се случи това събитие за успех, функцията за обратно извикване на addBook трябва да стартира.

Остава само да конструираме нашата функция за добавяне, използвайки данните от JSON, които се предават в обратния разговор:

функция addBook (събитие, данни) {
  $ ( ". Книга-списък"). Добави (data.book)
}

Тук получаваме събитието (събитието) и JSON (данни) обратно като параметри в обратния ни разговор. След това добавяме данните за книги от JSON в DOM в удобно наречен клас „списък с книги“. Тук data.book съдържа частизираната книга частична, която има информация за нашата книга и потребителя за показване.

Поставянето на друг обект е толкова просто, колкото да го върнете обратно в контролера чрез JSON и да го препратите тук или да поставите ръчно конструиран низ от HTML от файла Javascript. Можете също така да добавяте класове, да променяте стойностите на бутоните или да извършвате редица други манипулации, които дават на потребителя визуални доказателства, че кликването им е довело до и е записало промяна в състоянието.

Важно: Можете също така да предоставите функция за обратно извикване, която да се стартира, ако заявката за ajax генерира отговор за грешка. Събитието, което трябва да слушате, ще бъде грешка, за която дефинирате отделен обратен сигнал. Може да покажете изскачащо или опресняване на полето на формуляра в този обратен сигнал, така че потребителят да знае, че действието им по някакъв начин не е успешно:

$ ('. Добави a'). On ('ajax: грешка', displayError)

Това е!

Сега имате всичко необходимо, за да извършите както работата на клиента, така и на сървъра, за да обработвате заявки и отговори на Ajax във вашето приложение Rails. Забавлявайте се като добавяте асинхронно поведение и придвижвате приложението си все по-близо до едно изживяване на една страница (елиминирайки тези досадни, латентни заявки в мрежата!). Вашите потребители ще бъдат много по-добри за това.