Używając Rails 3.1, gdzie umieszczasz swój kod JavaScript "page specific"?

Question

Używając Rails 3.1, gdzie umieszczasz swój kod JavaScript "page specific"?

Z tego co wiem, cały Twój JavaScript zostaje scalony w jeden plik. Rails robi to domyślnie, gdy dodaje //= require_tree . do dolnej części pliku manifestu application.js.

To brzmi jak prawdziwe oszczędzanie życia, ale jestem trochę zaniepokojony kodem JavaScript specyficznym dla strony. Czy ten kod jest wykonywany na każdej stronie? Ostatnią rzeczą, jakiej chcę, jest to, aby wszystkie moje obiekty były tworzone dla każdej strony, gdy są potrzebne tylko na 1 stronie.

Poza tym, czy nie ma możliwości kodowania to też się kłóci?

A może umieszczasz mały znacznik script na dole strony, który wywołuje metodę wykonującą kod javascript dla strony?

Czy nie potrzebujesz już wymagać.więc js?

Thanks

EDIT : doceniam wszystkie odpowiedzi... i nie sądzę, że naprawdę rozumieją problem. Niektóre z nich są o stylizacji i nie wydają się odnosić... i inni po prostu wspominają javascript_include_tag... które Wiem, że istnieje (oczywiście...) ale to wygląda na to, że Rails 3.1 będzie owijać cały Twój JavaScript w jeden plik, zamiast ładować pojedynczy JavaScript na dole każdej strony.

Najlepszym rozwiązaniem, jakie mogę wymyślić, jest owinięcie pewnych funkcji w znaczniki div za pomocą ids lub class es. W kodzie JavaScript po prostu sprawdzasz, czy id lub class jest na stronie, a jeśli tak, uruchamiasz kod JavaScript, który jest z nim powiązany. W ten sposób, Jeśli element dynamiczny nie znajduje się na stronie, JavaScript kod nie działa - mimo że został zawarty w masywnym pliku application.js spakowanym przez Sprockets.

Moje powyższe rozwiązanie ma tę zaletę, że jeśli pole wyszukiwania znajduje się na 8 ze 100 stron, będzie działać tylko na tych 8 stronach. Nie musisz również umieszczać tego samego kodu na 8 stronach w witrynie. W rzeczywistości już nigdy nie będziesz musiał umieszczać znaczników skryptu ręcznego w swojej witrynie.

Myślę, że to jest prawdziwa odpowiedź na moje pytanie.

381

javascript ruby-on-rails asset-pipeline ruby-on-rails-3.1 sprockets

Author: sg7, 2011-05-29

Source

29 answers

Dokumenty Asset Pipeline sugerują, jak wykonać JS specyficzny dla kontrolera:

Na przykład, jeśli zostanie wygenerowany ProjectsController, pojawi się nowy plik w app/assets/javascripts/projects.js.coffee, a inny w app/assets/stylesheets/projects.css.scss. Należy umieścić dowolny JavaScript lub CSS unikalne do kontrolera wewnątrz ich odpowiednich plików zasobów, jak te pliki mogą być ładowane tylko dla tych kontrolerów z linii, takich jak <%= javascript_include_tag params[:controller] %> lub <%= stylesheet_link_tag params[:controller] %>.

Link do: asset_pipeline

154

Author: meleyal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-07 06:24:16

Dla specyficznych dla strony js możesz użyć Garber-Irish solution.

Więc twój folder rails javascripts może wyglądać tak dla dwóch kontrolerów-samochodów i użytkowników:

javascripts/
├── application.js
├── init.js
├── markup_based_js_execution
├── cars
│   ├── init .js
│   ├── index.js
│   └── ...
└── users
    └── ...

I javascripts będą wyglądać tak:

// application.js

//= 
//= require init.js
//= require_tree cars
//= require_tree users

// init.js

SITENAME = new Object();
SITENAME.cars = new Object;
SITENAME.users = new Object;

SITENAME.common.init = function (){
  // Your js code for all pages here
}

// cars/init.js

SITENAME.cars.init = function (){
  // Your js code for the cars controller here
}

// cars/index.js

SITENAME.cars.index = function (){
  // Your js code for the index method of the cars controller
}

I markup_based_js_execution będą zawierać kod dla obiektu UTIL oraz dla UTIL gotowego do DOM.wykonanie init.

I nie zapomnij umieścić tego w pliku układu:

<body data-controller="<%= controller_name %>" data-action="<%= action_name %>">

Myślę też że lepiej jest używać klas zamiast atrybutów data-*, dla lepszego css specyficznego dla strony. Jak wspomniał Jason Garber: selektory CSS specyficzne dla strony mogą być naprawdę niewygodne (gdy używasz atrybutów data-*)

Mam nadzieję, że to ci pomoże.

77

Author: welldan97,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-22 11:56:32

Widzę, że odpowiedziałeś na swoje pytanie, ale tu jest inna opcja:

W zasadzie zakładasz, że

//= require_tree .

Jest wymagane. Nie jest. Możesz go usunąć. W mojej obecnej aplikacji, pierwszy robię z 3.1.x szczerze mówiąc, zrobiłem trzy różne pliki JS najwyższego poziomu. Mój plik application.js ma tylko

//= require jquery
//= require jquery_ujs
//= require_directory .
//= require_directory ./api
//= require_directory ./admin

W ten sposób mogę tworzyć podkatalogi z własnymi plikami JS najwyższego poziomu, które zawierają tylko to, czego potrzebuję.

Klucze są:

możesz usunąć require_tree - Rails pozwala zmienić założenia, które tworzy
nie ma nic specjalnego w nazwie application.js - każdy plik w podkatalogu assets/javascript może zawierać dyrektywy przed procesorem z //=

Nadzieję, że to pomoże i dodaje kilka szczegółów do odpowiedzi ClosureCowboy.

Sujal

65

Author: sujal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-11 07:25:34

Inna opcja: aby utworzyć pliki specyficzne dla strony lub modelu, możesz utworzyć katalogi w folderze assets/javascripts/.

assets/javascripts/global/
assets/javascripts/cupcakes
assets/javascripts/something_else_specific

Twój główny plik manifestu application.js może być skonfigurowany do ładowania plików z global/. Określone strony lub grupy stron mogą mieć własne manifesty, które ładują pliki z własnych konkretnych katalogów. Sprockets automatycznie połączy pliki załadowane przez application.js z plikami specyficznymi dla Twojej strony, co pozwala na działanie tego rozwiązania.

Ta technika może być również używane do style_sheets/.

40

Author: ClosureCowboy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-14 09:21:56

Zdaję sobie sprawę, że przychodzę na tę imprezę trochę późno, ale chciałem dorzucić rozwiązanie, z którego ostatnio korzystam. Jednak pozwolę sobie najpierw wspomnieć...

Szyny 3.1/3.2 sposób (nie, sir . Nie podoba mi się to.)

Zobacz: http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline

Dla kompletności tej odpowiedzi załączam następujące informacje, a ponieważ nie jest to rozwiązanie niewykonalne... choć nie dbam o to.

"Rails Way"jest rozwiązaniem zorientowanym na kontroler, a nie zorientowanym na widok, o co prosił autor tego pytania. Istnieją specyficzne dla kontrolera Pliki JS nazwane po ich odpowiednich kontrolerów. Wszystkie te pliki są umieszczane w drzewie folderów, które nie jest domyślnie zawarte w żadnej z aplikacji.js wymagają dyrektyw.

Aby dołączyć kod specyficzny dla kontrolera, do widoku dodaje się następujące elementy.

<%= javascript_include_tag params[:controller] %>

Nienawidzę tego rozwiązania, ale to tam i to szybko. Prawdopodobnie można zamiast tego nazwać te pliki czymś w rodzaju " people-index.js " i " people-show.js", a następnie użyć czegoś w rodzaju "#{params[:controller]}-index", aby uzyskać rozwiązanie zorientowane na widok. Znowu, szybka naprawa, ale mi to nie pasuje.

My Data Atrybut Way

Nazwij mnie szalonym, ale chcę, aby wszystkie moje JS skompilowane i minified do aplikacji.js, kiedy się rozlokuję. Nie chcę pamiętać, żeby te małe maruderskie pliki były wszędzie. miejsce.

Ładuję wszystkie moje JS w jednym kompaktowym, wkrótce buforowanym pliku przeglądarki. Jeśli pewna część mojego podania.js trzeba odpalić na stronie, pozwalam HTML mi powiedzieć, a nie Rails.

Zamiast zamykać mój JS na określone identyfikatory elementów lub zaśmiecać mój HTML klasami znaczników, używam niestandardowego atrybutu danych o nazwie data-jstags.

<input name="search" data-jstag="auto-suggest hint" />

Na każdej stronie, używam - insert preferowaną metodę biblioteki js tutaj - aby uruchomić kod po zakończeniu ładowania DOM. To kod startowy wykonuje następujące czynności:

iteracja wszystkich elementów w DOM oznaczonych znakiem data-jstag
dla każdego elementu podziel wartość atrybutu na spację, tworząc tablicę ciągów znaczników.
dla każdego ciągu znaczników, wykonaj wyszukiwanie w Hash dla tego znacznika.
jeśli znaleziono pasujący klucz, uruchom funkcję, która jest z nim powiązana, przekazując element jako parametr.

Więc powiedzmy, że mam następujące zdefiniowane gdzieś w moim podanie.js:

function my_autosuggest_init(element) {
  /* Add events to watch input and make suggestions... */
}

function my_hint_init(element) {
  /* Add events to show a hint on change/blur when blank... */
  /* Yes, I know HTML 5 can do this natively with attributes. */
}

var JSTags = {
  'auto-suggest': my_autosuggest_init,
  'hint': my_hint_init
};

Zdarzenie bootstrapping zastosuje funkcje my_autosuggest_init i my_hint_init przeciwko wejściu wyszukiwania, zamieniając je w wejście, które wyświetla listę sugestii podczas wpisywania przez użytkownika, a także dostarcza pewnego rodzaju podpowiedzi, gdy wejście jest puste i nieostre.

Jeśli jakiś element nie jest oznaczony data-jstag="auto-suggest", kod auto-suggest nigdy nie zostanie wywołany. Jednak zawsze tam jest, minifikowany i ostatecznie buforowany w mojej aplikacji.js for those times that I potrzebuję tego na stronie.

Jeśli chcesz przekazać dodatkowe parametry do oznaczonych funkcji JS, musisz zastosować trochę kreatywności. Albo dodać atrybuty data-paramter, wymyślić jakąś składnię parametrów, albo nawet użyć podejścia hybrydowego.

Nawet jeśli mam jakiś skomplikowany przepływ pracy, który wydaje się specyficzny dla kontrolera, po prostu utworzę dla niego plik w folderze lib, spakuję go do aplikacji.js i oznacz go czymś w rodzaju "new-thing-wizard". Kiedy mój bootstrap uderzy w to tag, mój miły, fantazyjny czarodziej zostanie uruchomiony i uruchomiony. Uruchamia się w razie potrzeby dla widoku(widoków) kontrolera, ale nie jest podłączony do kontrolera w inny sposób. W rzeczywistości, jeśli dobrze zakoduję kreatora, mogę być w stanie podać wszystkie dane konfiguracyjne w widokach, a tym samym być w stanie ponownie użyć kreatora później dla każdego innego kontrolera, który go potrzebuje.

W każdym razie, w ten sposób od jakiegoś czasu implementuję js specyficzny dla strony i służył mi dobrze zarówno do prostych projektów stron, jak i do bardziej złożone / bogate aplikacje. Mam nadzieję, że jedno z dwóch rozwiązań, które tutaj przedstawiłem, my way lub The Rails way, jest pomocne dla każdego, kto natknie się na to pytanie w przyszłości.

16

Author: Ryan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-24 18:13:09

To zostało już dawno odebrane i zaakceptowane, ale wymyśliłem własne rozwiązanie oparte na niektórych z tych odpowiedzi i moich doświadczeniach z Rails 3+.

/ Align = "center" bgcolor = "# e0ffe0 " / cesarz chin / / align = center / Użyj go.

Najpierw w pliku application.js usuń //= require_tree.

Następnie w application_controller.rb Utwórz metodę pomocniczą:

helper_method :javascript_include_view_js //Or something similar

def javascript_include_view_js
    if FileTest.exists? "app/assets/javascripts/"+params[:controller]+"/"+params[:action]+".js.erb"
        return '<script src="/assets/'+params[:controller]+'/'+params[:action]+'.js.erb" type="text/javascript"></script>'
    end
end

Następnie w pliku układu application.html.erb Dodaj nowy helper wśród istniejących elementów javascript, poprzedzony helperem raw:

<head>
    <title>Your Application</title>
    <%= stylesheet_link_tag "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= raw javascript_include_view_js %>
</head>

Voila, teraz możesz łatwo utworzyć javascript specyficzny dla widoków używa tej samej struktury plików, której używasz wszędzie indziej w rails. Po prostu włóż swoje pliki do app/assets/:namespace/:controller/action.js.erb!

Mam nadzieję, że to pomoże komuś innemu!

7

Author: Mike A,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-15 20:37:19

Możesz dodać tę linię do pliku układu (np. aplikacji.html.erb), aby automatycznie załadować plik javascript specyficzny dla kontrolera (ten, który został utworzony podczas generowania kontrolera):

<%= javascript_include_tag params[:controller] %>

Można również dodać linię, która automatycznie ładuje plik skryptu w zależności od akcji.

<%= javascript_include_tag params[:controller] + "/" + params[:action] %>

Po prostu umieść Skrypty strony w podkatalogu nazwanym po nazwie kontrolera. W tych plikach możesz dołączyć Inne skrypty używając =require. Byłoby miło stworzyć helper dołącza plik tylko wtedy, gdy istnieje, aby uniknąć awarii 404 w przeglądarce.

6

Author: mcubik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-30 22:48:58

<%= javascript_include_tag params[:controller] %>

6

Author: Mr Bohr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-21 08:34:16

Być może znajdziesz pluggable_js gem jako odpowiednie rozwiązanie.

6

Author: peresleguine,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-25 13:22:04

The LoadJS gem is another option:

LoadJS umożliwia wczytywanie kodu Javascript specyficznego dla strony w aplikacji Rails bez utraty magii dostarczanej przez Sprockets. Cały kod Javascript będzie kontynuowany przez minified w jednym pliku Javascript, ale niektóre jego części będą wykonywane tylko dla niektórych stron.

Https://github.com/guidomb/loadjs

5

Author: meleyal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-02 10:38:23

Odpowiedź Filipa jest całkiem dobra. Oto kod, który sprawi, że będzie działać:

W aplikacji.html.erb:

<body class="<%=params[:controller].parameterize%>">

Zakładając, że twój kontroler nazywa się Projects, który wygeneruje:

<body class="projects">

Następnie w projektach.js.kawa:

jQuery ->
  if $('body.projects').length > 0  
     $('h1').click ->
       alert 'you clicked on an h1 in Projects'

3

Author: Rahil Sondhi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-15 00:50:12

Skrypty JavaScripts są scalane tylko wtedy, gdy mówisz Rails (raczej Sprockets), aby je scalić.

2

Author: yfeldblum,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-29 12:53:14

Tak rozwiązałem problem stylizacji: (przepraszam za Haml)

%div{:id => "#{params[:controller].parameterize} #{params[:view]}"}
    = yield

W ten sposób zaczynam wszystkie strony specyficzne .css.Sass pliki z:

#post
  /* Controller specific code here */
  &#index
    /* View specific code here */
  &#new
  &#edit
  &#show

W ten sposób można łatwo uniknąć wszelkich starć. Jeśli chodzi o .js.coffee pliki można po prostu inicjalizować takie elementy jak;

$('#post > #edit') ->
  $('form > h1').css('float', 'right')

Mam nadzieję, że to trochę pomogło.

2

Author: zeeraw,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-29 15:48:39

Można również grupować js w folderach i nadal używać potoku zasobów do selektywnego ładowania javascript w zależności od strony.

2

Author: Kenny Grant,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:44

Zgadzam się z twoją odpowiedzią, aby sprawdzić czy selektor istnieje, użyj:

if ($(selector).length) {
    // Put the function that does not need to be executed every page
}

(nie widziałem, żeby ktoś dodał rzeczywiste rozwiązanie)

2

Author: Kyle C,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-14 00:24:29

Nie widzę odpowiedzi, która by to wszystko poukładała. Dlatego postaram się umieścić meleyal, sujal (A la ClosureCowboy ), pierwsza część Ryana odpowiedzi, a nawetgal śmiałe stwierdzenie o kręgosłupie.js... wszystko razem w sposób krótki i jasny. A kto wie, może nawet spełnię wymagania Marnena Laibow-Kosera.

Przykład edits

Assets/javascripts / application.js

//= require jquery
//= require jquery_ujs
//= require lodash.underscore.min
...

views/layouts / application.html.erb

  ...
  </footer>

  <!-- Javascripts ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <%= javascript_include_tag "application" %>
  <%= yield :javascript %>

</body>
</html>

views/foo / index.html.erb

...
<% content_for :javascript do %>
  <%= javascript_include_tag params[:controller] %>
<% end %>

assets/javascripts / foo.js

//= require moment
//= require_tree ./foostuff

/align = "left"/js.kawa

alert "Hello world!"

Krótki opis

Usuń //= require_tree . z aplikacji.js i wymień tylko js że każda strona się dzieli.
Dwie linie pokazane powyżej w aplikacji .html.erb powiedz stronie, gdzie ma być dołączona aplikacja.js i js specyficzne dla Twojej strony.
Trzy linie pokazane powyżej w indeksie .html.erb mówi, aby twój widok szukał JS specyficznych dla strony i zawierał go w nazwanym regionie wydajności o nazwie": javascript " (lub jak chcesz go nazwać). W tym przykładzie kontrolerem jest "foo", więc Rails spróbuje włączyć " foo.js " w : javascript yield region w układzie aplikacji.
Lista js specyficznych dla twojej strony w foo.js (lub jak się nazywa kontroler). Lista wspólnych bibliotek, drzewa, katalogów, cokolwiek.
Przechowuj niestandardowe JS specyficzne dla strony w miejscu, w którym możesz łatwo odwoływać się do niego poza innymi niestandardowymi JS. W tym przykładzie foo.js wymaga drzewa foostuff więc umieść tam swoje niestandardowe JS, takie jak foothis.js.kawa .
Nie ma tu twardych zasad. Możesz swobodnie przenosić rzeczy, a być może nawet tworzyć wiele regionów wydajności o różnych nazwach w różnych układach, jeśli zajdzie taka potrzeba. To pokazuje tylko jeden możliwy pierwszy krok naprzód. (Nie robię tego dokładnie tak, biorąc pod uwagę nasze użycie kręgosłupa.js. Mogę też zrezygnować z foo.js w dół do folderu o nazwie foo zamiast foostuff, ale jeszcze nie zdecydowałem.)

Uwagi

Możesz zrobić podobne rzeczy z CSS i <%= stylesheet_link_tag params[:controller] %>, ale to jest poza zakresem pytania.

Jeśli przegapiłem rażące najlepsze praktyki tutaj, wyślij mi notkę, a ja się dostosuję. Rails jest dla mnie całkiem nowy i, szczerze mówiąc, nie jestem pod wrażeniem chaosu, który domyślnie wnosi do rozwoju przedsiębiorstwa i całego ruchu generowanego przez przeciętny program Rails.

2

Author: juanitogan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-28 16:07:56

Mam inne rozwiązanie, które chociaż primitive działa dobrze dla mnie i nie wymaga żadnych fantazyjnych strategii selektywnego ładowania. Umieść w swojej funkcji nornal document ready, ale następnie przetestuj bieżącą lokalizację systemu windows, aby sprawdzić, czy jest to strona, dla której javascript jest przeznaczony:

$(document).ready(function() {
   if(window.location.pathname.indexOf('/yourpage') != -1) {
          // the javascript you want to execute
   }
}

To nadal pozwala na załadowanie wszystkich js przez rails 3.x w jednym małym pakiecie, ale nie generuje zbyt dużego obciążenia ani żadnych konfliktów ze stronami, dla których js nie jest przeznaczony.

1

Author: Peter Abramowitsch,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-20 17:49:07

Odpowiedź Ryguya jest dobrą odpowiedzią, mimo że została pomniejszona o punkty ujemne.

Szczególnie jeśli używasz czegoś takiego jak Backbone JS-każda strona ma swój własny widok Backbone. Następnie plik erb ma tylko jedną linię wbudowanego javascript, który uruchamia właściwą klasę widoku szkieletowego. Uważam, że jest to pojedyncza linia "kodu kleju", a zatem fakt, że jego inline jest OK. Zaletą jest to, że możesz zachować swój "require_tree", który pozwala buforować całą przeglądarkę javascript.

W show.html.erb, będziesz miał coś w stylu:

<% provide :javascript do %>
  <%= javascript_include_tag do %>
    (new app.views.ProjectsView({el: 'body'})).render();
  <% end %>
<% end do %>

A w pliku układu będziesz potrzebował:

<%= yield :javascript %>

1

Author: Gal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-21 06:06:31

Przenieś wszystkie pliki commom JS do podfolderu, takiego jak "app/assets/javascript/global", a następnie w aplikacji.js, Zmień linię //= require_tree . na //= require_tree ./global.

Teraz możesz umieścić swoje JS specyficzne dla kontrolera w katalogu głównym 'app / assets / javascript /' i nie będą one zawarte w skompilowanym JS, są używane tylko wtedy, gdy wywołujesz je przez = javascript_include_tag w kontrolerze / widoku.

1

Author: Gedean Dias,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-14 00:22:09

Chociaż masz kilka odpowiedzi tutaj, myślę, że Twoja edycja jest prawdopodobnie najlepszym rozwiązaniem. Wzorzec projektowy, którego używamy w naszym zespole, który otrzymaliśmy z Gitlab jest wzorcem dyspozytora. Robi coś podobnego do tego, o czym mówisz, jednak nazwa strony jest ustawiana w tagu body przez rails. Na przykład, w pliku układu, po prostu dołącz coś takiego (w HAML):

%body{'data-page' => "#{controller}:#{action}" }

Wtedy wystarczy jedno zamknięcie i polecenie switch w pliku dispatcher.js.coffee w folderze javascripts jak więc:

$ ->
  new Dispatcher()

class Dispatcher
  constructor: ->
    page = $('body').attr('data-page')
    switch page
      when 'products:index'
        new Products() 
      when 'users:login'
        new Login()

Wszystko, co musisz zrobić w poszczególnych plikach (np. products.js.coffee lub login.js.coffee), to zamknąć je w klasie, a następnie globalizować symbol klasy, aby uzyskać do niego dostęp w dyspozytorze:

class Products
  constructor: ->
    #do stuff
@Products = Products

Gitlab ma kilka przykładów tego, że warto poszperać w przypadku, gdy jesteś ciekawy:)

1

Author: onetwopunch,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-31 00:15:59

Projekt Paloma oferuje ciekawe podejście do zarządzania kodem javascript specyficznym dla strony.

Przykład użycia z ich dokumentów:

var UsersController = Paloma.controller('Users');

// Executes when Rails User#new is executed.
UsersController.prototype.new = function(){
   alert('Hello Sexy User!' );
};

1

Author: zavg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-26 16:20:46

Krok 1. Usuń require_tree . w Twojej aplikacji.js i aplikacji.css.

Krok 2. Edytuj swoją aplikację.html.erb (domyślnie rails) w folderze layout. Dodaj "params [: controller]" w następujących znacznikach.

<%= stylesheet_link_tag    'application', params[:controller], media: 'all', 'data-turbolinks-track' => true %>

<%= javascript_include_tag 'application', params[:controller], 'data-turbolinks-track' => true %>

Krok 3. Dodaj plik w config/initializers / assets.rb

%w( controller_one controller_two controller_three ).each do |controller|
  Rails.application.config.assets.precompile += ["#{controller}.js", "#{controller}.js.coffee", "#{controller}.css", "#{controller}.scss"]
end

Bibliografia: http://theflyingdeveloper.com/controller-specific-assets-with-rails-4/

1

Author: etlds,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-14 15:40:50

Nie próbowałem tego, ale wygląda na to, że to prawda:

Jeśli masz content_for, który jest javascript (np. z prawdziwym javascript w nim), sprockets nie wiedziałby o tym i dlatego działa to tak samo jak teraz.
Jeśli chcesz wykluczyć plik z dużego pakietu javascript, przejdź do config / sprockets.pliku yml i odpowiednio zmodyfikować source_files. Następnie wystarczy dołączyć dowolny z plików, które wykluczone w razie potrzeby.

0

Author: Bill Eisenhauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-29 13:53:43

Zrobiłem to wcześniej używając tej metody: http://theflyingdeveloper.com/controller-specific-assets-with-rails-4 /. Super łatwe, polega na sterownikach, aby wybrać odpowiedni js do załadowania.

0

Author: Eddie Prislac,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-30 23:55:57

Połączyłem kilka odpowiedzi w:

Pomocnik aplikacji:

module ApplicationHelper
  def js_page_specific_include
    page_specific_js = params[:controller] + '_' + params[:action]
    if Rails.application.assets.find_asset(page_specific_js).nil?
      javascript_include_tag 'application', 'data-turbolinks-track' => true
    else
      javascript_include_tag 'application', page_specific_js, 'data-turbolinks-track' => true
    end
  end
end

Layouts / application.html.haml:

 <!DOCTYPE html>
%html{lang: 'uk'}
  %head   
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
   bla-bla-bla
    = js_page_specific_include   
   bla-bla-bla

0

Author: kapellan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-23 20:51:46

Po pierwsze: usuń \\=require_tree z aplikacji.js Po drugie: cały kod JS musi być umieszczony w /app/assets/javascritpt, a cały kod CSS musi być umieszczony w /app/assets/stylesheets

0

Author: Nicollas Matheus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-02 22:13:12

Idąc za tropem Ryana, oto co zrobiłem-

Zastosowanie.js.kawa

$ ->
    view_method_name = $("body").data("view") + "_onload"
    eval("#{view_method_name}()") if eval("typeof #{view_method_name} == 'function'")
    view_action_method_name = $("body").data("view") + "_"+$("body").data("action")+"_onload"
    eval("#{view_action_method_name}()") if eval("typeof #{view_action_method_name} == 'function'")

Użytkownicy.js.coffeescript, np. controller: users, action: dashboard)

window.users_dashboard_onload = () ->
    alert("controller action called")
window.users_onload = () ->
    alert("controller called")

Zastosowanie.html.haml

%body{:data=>{:view=>controller.controller_name, :action=>controller.action_name}}

-2

Author: Kruttik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-03 04:06:47

Oto Jak to zrobić, zwłaszcza jeśli nie musisz wykonywać ton bibliotek dla konkretnej strony, ale tylko po to, aby uruchomić mniej więcej kilkaset linii JS.

Ponieważ osadzanie kodu Javascript w HTML jest w porządku, po prostu utwórz w obszarze app/views shared.katalog js i umieść tam swój kod strony / stron w my_cool_partial.html.erb

<script type="text/javascript"> 
<!--
  var your_code_goes_here = 0;
  function etc() {
     ...
  }
-->
</script>

Więc teraz, gdziekolwiek chcesz, po prostu rób:

  = render :partial => 'shared.js/my_cool_partial'

I to wszystko, k?

-3

Author: valk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-14 21:22:00

score 23 · Accepted Answer

Doceniam wszystkie odpowiedzi... i nie sądzę, że naprawdę rozumieją problem. Niektóre z nich są o stylizacji i nie wydają się odnosić... i inni po prostu wspominają javascript_include_tag... które Wiem, że istnieje (oczywiście...) ale wygląda na to, że Rails 3.1 będzie owijał cały Twój Javascript w jeden plik, a nie ładował pojedynczy Javascript na dole każdej strony.

Najlepszym rozwiązaniem, jakie mogę wymyślić, jest zawinięcie pewnych funkcji w znaczniki div z ids lub class es. W kodzie javascript. Następnie po prostu sprawdzasz, czy id lub class jest na stronie, a jeśli tak, uruchamiasz kod javascript, który jest z nim skojarzony. W ten sposób, jeśli element dynamiczny nie znajduje się na stronie, kod javascript nie działa - nawet jeśli został zawarty w pliku massive application.js spakowanym przez Sprockets.

Moje powyższe rozwiązanie ma tę zaletę, że jeśli pole wyszukiwania znajduje się na 8 ze 100 stron, będzie działać tylko na tych 8 stronach. Nie będziesz też musiał dołącz ten sam kod na 8 stronach na stronie. W rzeczywistości już nigdy nie będziesz musiał umieszczać znaczników skryptu ręcznego w swojej witrynie-z wyjątkiem wstępnego ładowania danych.

Myślę, że to jest prawdziwa odpowiedź na moje pytanie.