Rails 3 hat etwas unauffälliges JavaScript, was ziemlich cool ist.
Aber ich habe mich gefragt, wie ich am besten zusätzliches JavaScript für eine bestimmte Seite einfügen kann.
Zum Beispiel, wo ich vorher getan haben könnte:
<%= f.radio_button :rating, 'positive', :onclick => "$('some_div').show();" %>
Wir können es jetzt mit so etwas unauffällig machen
<%= f.radio_button :rating, 'positive' %>
# then in some other file
$('user_rating_positive').click(function() {
$('some_div').show();
}
Ich denke also, meine Frage ist, wo / wie man dieses JavaScript einfügt. Ich möchte die application.js
Datei nicht füllen, da dieses JavaScript nur für diese eine Ansicht gilt. Sollte ich irgendwie eine benutzerdefinierte JavaScript-Datei für jede Seite einfügen oder sie in eine Instanzvariable einfügen, nach der der Header sucht?
javascript
ruby-on-rails
ruby-on-rails-3
Brian Armstrong
quelle
quelle
Antworten:
Was ich gerne mache, ist das Per-View-Javascript in einen
content_for :head
Block aufzunehmen und dannyield
in diesen Block in Ihrem Anwendungslayout aufzunehmen. BeispielsweiseWenn es ziemlich kurz ist, dann:
oder, wenn länger, dann:
Dann in Ihrer Layoutdatei
quelle
<%= javascript_include_tag "my_javascipt_file" %>
?Wenn Sie Javascript nur auf einer Seite einfügen möchten, können Sie es natürlich inline in die Seite einfügen. Wenn Sie jedoch Ihr Javascript gruppieren und die Asset-Pipeline, minimierte JS usw. nutzen möchten, ist dies möglich und es ist zusätzlich möglich js-Assets, die kombiniert und nur auf bestimmten Seiten geladen werden, indem Sie Ihre js in Gruppen aufteilen, die nur in bestimmten Controllern / Ansichten / Abschnitten der Site gelten.
Verschieben Sie Ihre js in Assets in Ordner mit jeweils einer separaten Manifestdatei. Wenn Sie also eine js-Bibliothek für Administratoren haben, die nur im Backend verwendet wird, können Sie Folgendes tun:
in der vorhandenen application.js
in einer neuen Manifestdatei admin.js.
Stellen Sie sicher, dass dieses neue js-Manifest geladen ist, indem Sie config / Production.rb bearbeiten
Passen Sie dann Ihr Seitenlayout so an, dass Sie einige zusätzliche js für den Seitenkopf einfügen können:
Dann in Ansichten, in denen Sie diese bestimmte js-Gruppe (sowie die normale Anwendungsgruppe) und / oder alle seitenspezifischen js, css usw.:
Sie können natürlich dasselbe mit CSS tun und es auf ähnliche Weise gruppieren, um es nur auf bestimmte Bereiche der Site anzuwenden.
quelle
//= require_tree ./global
, aber nicht , wenn ich verwende//= require_directory ./global
Rails 3.2.12 verwenden.Diese Antworten haben mir sehr geholfen! Wenn jemand ein bisschen mehr will ...
application.js.coffee
alle Javacskripte jedes Mal geladen , wenn Sie zu einer anderen Seite navigieren, und der Zweck, seitenspezifische Javascripts zu erstellen, wird zunichte gemacht.Daher müssen Sie Ihre eigene Manifestdatei (z. B.
speciifc.js
) erstellen , für die alle seitenspezifischen Javascript-Dateien erforderlich sind. Ändern Sie auchrequire_tree
vonapplication.js
App / Assets / Javascripts / application.js
App / Assets / Javascripts / Specific.js
Fügen Sie dann
environments/production.rb
dieses Manifest mit der Konfigurationsoption zur vorkompilierten Liste hinzu.config.assets.precompile += %w( specific.js )
Getan! Alle freigegebenen Javascripts, die immer geladen werden sollten, werden in einem
app/assets/javascripts/global
Ordner abgelegt und die seitenspezifischen Javascripts inapp/assets/javascripts/specific
. Sie können die seitenspezifischen Javascripts einfach aus der Ansicht wie aufrufen<%= javascript_include_tag "specific/whatever.js" %>
//.js ist optional.Das ist ausreichend, aber ich wollte es auch nutzen
javascript_include_tag params[:controller]
. Wenn Sie Controller erstellen, wird eine zugehörige Coffeescript-Dateiapp/assets/javascripts
wie bei anderen genannten Personen generiert . Es gibt wirklich Controller-spezifische Javascripts, die nur geladen werden, wenn der Benutzer die spezifische Controller-Ansicht erreicht.Also habe ich ein anderes Manifest erstellt
controller-specific.js
App / Assets / Javascripts / Controller-spezifisch.js
//= require_directory .
Dies schließt alle automatisch generierten Kaffeeskripte ein, die den Controllern zugeordnet sind. Außerdem müssen Sie es der vorkompilierten Liste hinzufügen.
config.assets.precompile += %w( specific.js controller-specific.js )
quelle
javascript_include_tag params[:controller]
. Derzeit hat meine application.html.erb diese Zeilejavascript_include_tag 'application'
. Soll ich dies durch die andere Leitung ersetzen?<%= javascript_include_tag "specific/whatever.js" %>
in einencontent_for :header
Block setzen?config.assets.precompile
. Ist nicht allesapp/assets/javascripts/*.js
automatisch vorkompiliert?application.css
undapplication.js
. Andere müssen entweder in anderen Dateien enthalten sein oder mit aufgelistet werdenconfig.assets.precompile
. Lesen Sie hier mehrconfig.assets.precompile
undconfig.assets.version
bin nach config / initializers / assets.rb umgezogenIch bevorzuge folgendes ...
In Ihrer Datei application_helper.rb
und dann in Ihrer speziellen Ansicht (app / views / books / index.html.erb in diesem Beispiel)
... scheint für mich zu arbeiten.
quelle
Wenn Sie nicht die Asset-Pipeline oder die komplexen Workarounds verwenden möchten, um das erforderliche seitenspezifische Javascript zu erhalten (ich verstehe), ist der einfachste und robusteste Weg, der das Gleiche wie die obigen Antworten erreicht, aber mit weniger Code nur zu verwenden:
Hinweis: Dies erfordert eine http-Anforderung mehr pro Include-Tag als die verwendeten Antworten
content_for :head
quelle
javascript_include_tag
war genau das, wonach ich gesucht habe, Prost AJP//= require .
in der application.js aufgenommen werden?//= require .
würde dieses Skript auf jede Seite Ihrer Website bringen, sodass Sie etwas tun müssten, wie es Kenny Grant (verwenden//= require_tree ./global
) oder bjg vorgeschlagen hat.//= require_tree .
habe//= require_directory .
in application.js gewechselt und dann ein Unterverzeichnis in Assets \ Javascripts erstellt. Beachten Sie, dass Sie das neue Verzeichnis in config \ initializers \ assets.rb aufnehmen müssen, um Ihre js vorkompilieren zu können, indem Sie die folgende Zeile hinzufügen:Rails.application.config.assets.precompile += %w( new_dir/js_file.js )
Schauen Sie sich pluggable_js gem an. Möglicherweise ist diese Lösung einfacher zu verwenden.
quelle
Meines Wissens nach soll die Asset-Pipeline die Ladezeit von Seiten verkürzen, indem alle Ihre JS in einer (minimierten) Datei zusammengefasst werden. Während dies auf den ersten Blick abstoßend erscheint, ist es tatsächlich eine Funktion, die bereits in populären Sprachen wie C und Ruby vorhanden ist. Dinge wie "Include" -Tags sollen das mehrfache Einschließen einer Datei verhindern und Programmierern helfen, ihren Code zu organisieren. Wenn Sie ein Programm in C schreiben und kompilieren, ist der gesamte Code in jedem Teil Ihres laufenden Programms vorhanden. Methoden werden jedoch nur dann in den Speicher geladen, wenn dieser Code verwendet wird. In gewisser Weise enthält ein kompiliertes Programm nichts, um sicherzustellen, dass der Code gut modular aufgebaut ist. Wir machen den Code modular, indem wir unsere Programme auf diese Weise schreiben, und das Betriebssystem lädt nur die Objekte und Methoden in den Speicher, die wir für einen bestimmten Ort benötigen. Gibt es überhaupt eine "methodenspezifische Inklusion"? Wenn Ihre Rails-App erholsam ist, ist dies im Wesentlichen das, wonach Sie fragen.
Wenn Sie Ihr Javascript so schreiben, dass es das Verhalten von HTML-Elementen auf der Seite verbessert, sind diese Funktionen von Natur aus "seitenspezifisch". Wenn es einen komplizierten Code gibt, den Sie so geschrieben haben, dass er unabhängig von seinem Kontext ausgeführt wird, sollten Sie diesen Code möglicherweise trotzdem an ein HTML-Element binden (Sie können das Body-Tag verwenden, wie in der Garber-Irish-Methode beschrieben ). Wenn eine Funktion bedingt ausgeführt wird, ist die Leistung wahrscheinlich geringer als bei all diesen zusätzlichen Skript-Tags.
Ich denke darüber nach, das Paloma- Juwel zu verwenden, wie im Rails-Apps-Projekt beschrieben . Anschließend können Sie Ihr Javascript seitenspezifisch gestalten, indem Sie seitenspezifische Funktionen in einen Paloma-Rückruf aufnehmen:
Du benutzt Schienen, also weiß ich, dass du Edelsteine liebst :)
quelle
Sie sollten Ihre JS- oder CSS-Dateien nicht außerhalb der Asset-Pipeline laden, da Sie wichtige Funktionen verlieren, die Rails so großartig machen. Und du brauchst kein weiteres Juwel. Ich glaube daran, so wenig Edelsteine wie möglich zu verwenden, und die Verwendung eines Edelsteins ist hier nicht erforderlich.
Was Sie möchten, wird als "Controller-spezifisches Javascript" bezeichnet ("Aktionsspezifisches Javascript ist unten enthalten). Auf diese Weise können Sie eine bestimmte JavaScript-Datei für einen bestimmten CONTROLLER laden. Der Versuch, Ihr Javascript mit einer Ansicht zu verbinden, ist eine Art von .. Sie möchten es Ihren Controllern oder Aktionen in Ihren Controllern zuordnen.
Leider haben Rails-Entwickler aus irgendeinem Grund entschieden, dass standardmäßig jede Seite jede JS-Datei in Ihrem Assets-Verzeichnis lädt. Warum sie sich dazu entschlossen haben, anstatt standardmäßig "Controller Specific Javascript" zu aktivieren, werde ich nie erfahren. Dies erfolgt über die Datei application.js, die standardmäßig die folgende Codezeile enthält:
Dies ist als Richtlinie bekannt . Es ist das, was sprockets verwendet, um jede JS-Datei in das Verzeichnis assets / javascripts zu laden. Standardmäßig lädt sprockets application.js und application.css automatisch, und die Direktive require_tree lädt jede JS- und Coffee-Datei in ihre jeweiligen Verzeichnisse.
HINWEIS: Wenn Sie ein Gerüst bauen (wenn Sie kein Gerüst haben, ist jetzt ein guter Zeitpunkt, um zu beginnen), generiert Rails automatisch eine Kaffeedatei für Sie, für den Controller dieses Gerüsts. Wenn Sie es wollen , einen generieren Standard JS statt einer Datei Kaffee - Datei, entfernen Sie den Kaffee Juwel , die standardmäßig in Ihrem aktiviert ist Gemfile , und Ihr Gerüst wird JS Dateien erstellen statt.
Ok, der erste Schritt zum Aktivieren von "Controller Specific Javascript" besteht darin, den Code "require_tree" aus Ihrer Datei application.js zu entfernen oder ihn in einen Ordner in Ihrem Verzeichnis "resources / javascripts" zu ändern, wenn Sie weiterhin globale JS-Dateien benötigen. IE:
Schritt 2: Gehen Sie in Ihre Datei config / initializers / assets.rb und fügen Sie Folgendes hinzu:
Geben Sie die gewünschten Controllernamen ein.
Schritt 3: Ersetzen Sie den javascript_include_tag in Ihrer application.html.erb-Datei durch diesen (beachten Sie den Teil params [: controller]:
Starten Sie Ihren Server und Ihre Bratsche neu! Die JS-Datei, die mit Ihrem Gerüst erstellt wurde, wird jetzt nur geladen, wenn dieser Controller aufgerufen wird.
Müssen Sie eine bestimmte JS-Datei auf eine bestimmte AKTION in Ihrem Controller , IE / articles / new , laden ? Tun Sie dies stattdessen:
application.html.erb :
config / initializers / assets.rb :
Fügen Sie dann einen neuen Ordner mit demselben Namen wie Ihr Controller in Ihren Ordner "Assets / Javascripts" ein und legen Sie Ihre JS-Datei mit demselben Namen wie Ihre Aktion darin ab. Es wird dann auf diese bestimmte Aktion geladen.
quelle
Ok, vielleicht ist dies die schlechteste Arbeit, die es je gab, aber ich erstelle eine Controller-Methode, die gerade die .js-Datei gerendert hat
Regler
Aussicht
Wenn wir dies aus irgendeinem Grund nicht tun möchten, lassen Sie es mich wissen.
quelle
Die bevorzugte Methode zum Hinzufügen von JS ist die Fußzeile. Sie haben also folgende Möglichkeiten:
show.html.erb:
Layouts / application.html.erb
quelle