Beste Möglichkeit, seitenspezifisches JavaScript in einer Rails 3-App hinzuzufügen?

Question 1

Rails 3 hat etwas unauffälliges JavaScript, was ziemlich cool ist.

Aber ich habe mich gefragt, wie man am besten zusätzliches JavaScript für eine bestimmte Seite einbindet.

Zum Beispiel, wo ich zuvor vielleicht getan habe:

<%= f.radio_button :rating, 'positive', :onclick => "$('some_div').show();" %>

Wir können es jetzt unauffällig machen mit so etwas wie

<%= f.radio_button :rating, 'positive' %>

# then in some other file
$('user_rating_positive').click(function() {
  $('some_div').show();
}

Also denke ich, meine Frage ist, wo/wie man dieses JavaScript einbindet? Ich möchte die nicht auffüllen application.js Datei, da dieses JavaScript nur auf diese eine Ansicht anwendbar ist. Soll ich irgendwie eine benutzerdefinierte JavaScript-Datei für jede Seite einfügen oder sie in eine Instanzvariable einfügen, nach der der Header sucht?

Question 2

Was ich gerne mache, ist das Per-View-JavaScript in a einzubinden content_for :head blockieren und dann yield zu diesem Block in Ihrem Anwendungslayout. Beispielsweise

Wenn es ziemlich kurz ist, dann:

<% content_for :head do %>
  <script type="text/javascript">
    $(function() {
      $('user_rating_positve').click(function() {
        $('some_div').show();
      }
    });
  </script>
<% end %>

oder, wenn länger, dann:

<% content_for :head do %>
  <script type="text/javascript">
    <%= render :partial => "my_view_javascript"
  </script>
<% end %>

Dann in Ihrer Layoutdatei

<head>
  ...
  <%= yield :head %>
</head>

Question 3

Wenn Sie Javascript nur auf einer Seite einfügen möchten, können Sie es natürlich inline auf der Seite einfügen. Wenn Sie jedoch Ihr Javascript gruppieren und die Vorteile der Asset-Pipeline, des minimierten js usw. nutzen möchten, ist dies möglich und hat zusätzliche 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 Website gelten.

Verschieben Sie Ihre js in Assets in Ordner mit jeweils einer separaten Manifestdatei. Wenn Sie also eine Admin-js-Bibliothek haben, die nur im Backend verwendet wird, können Sie Folgendes tun:

Vermögenswerte
- Javascripts
  - Administrator
    - …js
  - admin.js (Manifest für die Admin-Gruppe)
  - application.js (Manifest für globale App-Gruppe)
  - global
    - …js

in der bestehenden application.js

//= require jquery
//= require jquery_ujs
//= require_tree ./global // requires all js files in global folder

in einer neuen admin.js-Manifestdatei

//= require_tree ./admin // requires all js files in admin folder

Stellen Sie sicher, dass dieses neue js-Manifest geladen wird, indem Sie config/production.rb bearbeiten

config.assets.precompile += %w( admin.js )

Passen Sie dann Ihr Seitenlayout so an, dass Sie einige zusätzliche js für den Seitenkopf einfügen können:

<%= content_for :header %>

Dann in Ansichten, in denen Sie diese spezifische JS-Gruppe (sowie die normale Anwendungsgruppe) und/oder seitenspezifische JS, CSS usw. einschließen möchten:

<% content_for :header do %>
  <%= javascript_include_tag 'admin' %>  
<% end %>

Sie können natürlich dasselbe mit CSS machen und es auf ähnliche Weise gruppieren, um es nur auf bestimmte Bereiche der Site anzuwenden.

Question 4

Diese Antworten haben mir sehr geholfen! Falls jemand noch etwas mehr will…

Sie müssen Javascripts in Manifeste einfügen, wenn Sie möchten, dass sie vorkompiliert werden. Wenn Sie jedoch jede Javascript-Datei von benötigen application.js.coffee dann werden alle Javascripts jedes Mal geladen, wenn Sie zu einer anderen Seite navigieren, und der Zweck, seitenspezifische Javascripts auszuführen, wird zunichte gemacht.

Daher müssen Sie Ihre eigene Manifestdatei erstellen (z speciifc.js), für die alle seitenspezifischen Javascript-Dateien erforderlich sind. Auch modifizieren require_tree von application.js

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require_tree ./global

app/assets/javascripts/specific.js

//= require_tree ./specific

Dann in deiner environments/production.rb fügen Sie dieses Manifest der vorkompilierten Liste mit der Option config hinzu,

config.assets.precompile += %w( specific.js )

Fertig! All die geteilt Javascripts, die immer geladen werden sollten, werden eingefügt app/assets/javascripts/global Ordner und die seitenspezifischen Javascripts darin app/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 davon Gebrauch machen javascript_include_tag params[:controller] auch. Wenn Sie Controller erstellen, wird eine zugehörige Coffeescript-Datei generiert app/assets/javascripts wie andere Leute erwähnt haben. Es gibt wirklich Controller-spezifisch Javascripts, die nur geladen werden, wenn der Benutzer die spezifische Controller-Ansicht erreicht.

Also habe ich ein weiteres Manifest erstellt controller-specific.js

app/assets/javascripts/controller-specific.js

//= require_directory .

Dazu gehören alle automatisch generierten Coffeescripts, die mit Controllern verbunden sind. Außerdem müssen Sie es der vorkompilierten Liste hinzufügen.

config.assets.precompile += %w( specific.js controller-specific.js )

Question 5

Ich bevorzuge folgendes…

In Ihrer Datei application_helper.rb

def include_javascript (file)
    s = " <script type="text/javascript">" + render(:file => file) + "</script>"
    content_for(:head, raw(s))
end

und dann in Ihrer speziellen Ansicht (app/views/books/index.html.erb in diesem Beispiel)

<% include_javascript 'books/index.js' %>

… scheint bei mir zu funktionieren.

Question 6

Wenn Sie die Asset-Pipeline oder die komplexen Problemumgehungen nicht verwenden möchten, um das notwendige seitenspezifische Javascript zu erhalten (ich sympathisiere), ist der einfachste und robusteste Weg, der dasselbe wie die obigen Antworten erreicht, jedoch mit weniger Code, nur zu benutzen:

<%= javascript_include_tag "my_javascipt_file" %>

Hinweis: Dies erfordert eine weitere HTTP-Anfrage pro Include-Tag als die Antworten, die verwenden content_for :head

Question 7

Schauen Sie sich an Pluggable_js Juwel. Möglicherweise finden Sie diese Lösung einfacher zu verwenden.

Question 8

Mein Verständnis ist, dass die Asset-Pipeline die Seitenladezeit verkürzen soll, indem sie alle Ihre js in einer (minifizierten) Datei zusammenfasst. Obwohl dies oberflächlich betrachtet abstoßend erscheinen mag, ist es tatsächlich ein Feature, das bereits in populären Sprachen wie C und Ruby vorhanden ist. Dinge wie “include”-Tags sollen verhindern, dass eine Datei mehrfach eingebunden wird, 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 gewissem Sinne enthält ein kompiliertes Programm nichts, um zu garantieren, dass der Code schön modular 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 eine bestimmte Lokalität benötigen. Gibt es überhaupt so etwas wie „methodenspezifische Inklusion“? Wenn Ihre Rails-App ruhig 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 erweitert, dann sind diese Funktionen per Design „seitenspezifisch“. Wenn Sie komplizierten Code so geschrieben haben, dass er unabhängig von seinem Kontext ausgeführt wird, sollten Sie diesen Code vielleicht trotzdem an ein HTML-Element binden (Sie könnten das Body-Tag verwenden, wie in der Garber-Irish-Methode). Wenn eine Funktion bedingt ausgeführt wird, ist die Leistung wahrscheinlich geringer als all diese zusätzlichen Skript-Tags.

Ich denke darüber nach, die zu verwenden Paloma gem, wie in der beschrieben Rails-Apps-Projekt. Dann können Sie Ihr Javascript seitenspezifisch machen, indem Sie seitenspezifische Funktionen in einen Paloma-Callback einfügen:

Paloma.callbacks['users']['new'] = function(params){
    // This will only run after executing users/new action
    alert('Hello New Sexy User');
};

Du benutzt Schienen, also weiß ich, dass du Edelsteine liebst 🙂