Gdzie umieścić kod jQuery specyficzny dla strony w Rails 4.1?

Question

chcę umieścić jakiś prosty kod JavaScript, który używa jQuery na konkretnej stronie w Rails 4.1 Projekt:

$("#my_div").on("click", function() { 
    alert($(this).text()); 
}); 

Jednak z Rails 4.1, jQuery jest zawarty na samym końcu html domyślnie. Wiem, że mogę przenieść to do nagłówka lub mogę umieścić powyższe w funkcji ustawionej na window.onload lub document.onload. Ale zgaduję, że istnieje dobry powód, dla którego Rails przeniósł jQuery do końca, więc jestem ciekawy, co należy tutaj zrobić?

Answer 1

W aplikacji application.js można zmienić kolejność, w której są wywoływane, należy zmienić tę sekwencję w czasie, aby wszystko działało lub poprawnie ładowało. Musiałem to zrobić raz i była to dość żmudna robota.

Answer 2

Nie powinieneś mieć kodu "specyficznego dla strony", biorąc pod uwagę teoretycznie powinieneś mieć jeden duży plik JS na końcu.

Twój kod nie jest "zależny od strony", to znaczy, jeśli nie masz #my_div na swojej stronie, kod po prostu nie działa, ale jest OK.

Po tym wyjaśnieniu, kod powinien być w pliku JavaScript w aplikacji/aktywa/JavaScript i należy wymagać jej // = wymagać twój_plik po jquery_ujs czy co tam (nie pamiętam teraz).

Należy umieścić kod wewnątrz "document.ready" wydarzenie, które jest obsługiwane w jQuery w ten sposób:

$(function() { 
    $("#my_div").on("click", function() { 
    alert($(this).text()); 
    }); 
}); 

Dodatkowe informacje o document.ready można znaleźć na JQuery documentation

This upewnij się, że twój kod jest wykonywany tylko po wczytaniu całej strony (razem z javascript, css i tak dalej), więc kiedy wykonasz kod, nie będziesz miał problemu.

Przykładem application.js plik może wyglądać następująco:

//= require jquery_ujs 
//= require yourfile 
//= require_tree . 

Powodem Szyny umieścić kod na końcu kodu HTML jest więc html (i CSS) można oglądać przed załadowaniem JavaScript kod (co jest ciężką operacją), dzięki czemu użytkownik może rozpocząć interakcję/czytanie swojej witryny w ten sposób. Również w ten sposób upewniasz się, że wszystko jest poprawnie załadowane, ponieważ ostatni element powinien zostać przeanalizowany.
Jeśli się nie mylę, pamiętam coś o "ładowaniu synchronizatora javascript", nie pamiętam, czy było to żądanie sieciowe, czy faktycznie ładowałem plik javascript, ale pamiętam, że znacznik skryptu to blokowanie Po drugie, przeglądarka nie będzie kontynuować analizowania html (lub renderowania css) podczas ładowania pliku javascript, dlatego jest na końcu html jako ostatni element.

Edycja 1: Ponownie odczytując twoje pytanie, obawiam się, że faktycznie wstawiasz kod javascript bezpośrednio w html. Jeśli tak jest, włóż go przynajmniej po tym, jak jquery jest dołączony do szyn.
W każdym razie, ta praktyka jest błędna, chyba że budujesz dużą aplikację internetową z dużą ilością javascript (i prawdopodobnie będziesz używać czegoś w stylu requirejs), nie ma powodu, aby nie mieć pojedynczego pliku javascript (wiele żądań jest wolniejszych od pojedynczego, zawsze powinieneś łączyć css w jeden, taki sam dla javascript).Jak już powiedziałem, nie ma problemu, Twój kod może być zawarty w wszystkich stronach, tylko upewnij się, że #my_div jest obecny tylko tam, gdzie faktycznie chcesz uruchomić ten kod.

Może być lepiej związany kod do klasy w ten sposób (i to chyba dobry sposób, żeby to zrobić):

$(".js-spam-text").on("click", function() { 
    alert($(this).text()); 
}); 

Niestety nazwy wymienić JS-spam-tekst cokolwiek chcesz. Na przykład wiadomość alertu js jest dobrym kandydatem.